I made a simple html file. but while running this on browser and view source code on browser it shows different DOM structure, table get nested in labels. Why the DOM structure is different than the original source code.
<html>
<head>
<title>Student Details</title>
<head>
<body style="font-family:sans-serif;">
<center>
<div id='add_student'>
<form>
<lable for="tot" >Name:</label>
<input type='text' id='tot'>
<lable for='sex'>Sex:</label>
<select id="sex">
<option value=''>Select</option>
<option value='Male'>Male</option>
<option value='Female'>Female</option>
</select>
<lable for='section'>Section:</label>
<input type="radio" name="section" id='section' value="A">A
<input type="radio" name="section" id='section' value="B">B
<input type="button" id="add_button" value="Add">
</form>
<hr>
<table style="text-align: center;">
<th>
<td width='120px' text-align='center'>Name</td>
<td width='120px' text-align='center'>Sex</td>
<td width='120px' text-align='center'>Section</td>
<td width='120px' text-align='center'>Click</td>
</th>
</table>
<div id='list_div'>
</div>
</div>
<script src="jquery-1.8.2.min.js"></script>
<script src="underscore-1.4.2.min.js"></script>
<script src="backbone.js"></script>
<script type="text/template" id='list_template'>
<tr>
<td width='120px' text-align='center' ><%= name %></td>
<td width='120px' text-align='center'><%= sex %></td>
<td width='120px' text-align='center'><%= section %></td>
<td width='120px'><button id='del_but' value='Delete'>Click</button></td>
</tr>
</script>
<script src="script.js"></script>
</center>
<script></script>
</body>
Your HTML is invalid (e.g. <lable for="tot" > is misspelt so elements are nested inside it because you don't have an end tag that actually matches it, and you have a <th> wrapping <td> elements instead of a <thead> wrapping <th> elements).
Write valid HTML. Test it using a validator.
You HTML is completely off. In the first table, you have <td>s in a <th>.
The right structure for a table is:
<table>
<tr>
<th>header</th>
<td>data</td>
<td>data</td>
(more tds...)
</tr>
(more trs...)
</table>
Related
I tried to add a reset button and submit button, to a form which includes tables, but they do not work
here's the code:
<forms name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</forms>
Please using Form tag instead of forms, Refer here
<form name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</form>
I re-created your example by using Event Handlers with Javascript (JQuery).
If you do not want to use Javascript then please feel free to use #Shivasagar example.
Here is my snippet:
// Adding event listener on the reset button
$('input[name="reset"]').click(function(event) {
// Then setting the values of the form to nothing
$('input[name="name"]').val('');
$('input[name="age"]').val('');
$('input[name="email"]').val('');
$('select[name="newsType"]').val('None');
$('textarea[name="comments"]').val('');
});
// Prevent submit from submiting
$('input[name="submit"]').click(function(event) {
event.preventDefault();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<form id="f1">
<table class="table table-responsive">
<tbody>
<tr>
<td>Name:</td>
<td><input class="form-control" type="text" name="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input class="form-control" type="text" name="age"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="form-control" type="text" name="email"></td>
</tr>
<tr>
<td>News Type:</td>
<td>
<select class="form-control" name="newsType">
<option value="None" style="display: none;" selected> -- select an option -- </option>
<option value="Tech">Tech</option>
<option value="Gaming">Gaming</option>
<option value="Homepage">Homepage</option>
<option value="Stocks">Stocks</option>
<option value="Sports">Sports</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="50" rows="5" placeholder="Give Feedback" name="comments"></textarea></td>
</tr>
<tr>
<td><input class="btn btn-light float-left" type="button" value="Reset" name="reset"></td>
<td><input class="btn btn-light float-right" type="submit" value="Submit" name="submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
I want it to auto jump to next line if the label text overflow. I no want the label to be hidden or using ellipsis.
Note: In my case, i will loop the div content in the same row td. I want to break the word to next line in full size of browser or browser resized to smaller.
How can i solve this problem?
Apologies for having too less reputation to post a comment.
But have you checked out Bootstrap tables?
It not only solves your problem, but is a good step in moving towards simple web development.
Bootstrap takes care of everything and allows us to make neat and clean tables with very little code from our side.
If at all you need to further style your table, you can add styling OVER the bootstrap styled table.
Check out the following simple tutorial where you can also try it out online.
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
To prove how simple it is,
I have pasted my code into a simple HTML page.
Added bootstrap.
And voila! Your issue is solved in the example given below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
</tbody>
</table>
</body>
</html>
I am still confused on what you wanted, so I have included 2 approaches.
Try Float:right;
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%; float:right;">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
You can use word-wrap: break-word for your label tag.
The word-wrap property allows long words to be able to be broken and wrap onto the next line. break-word allows unbreakable words to be broken
<table>
<thead>
<tr>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
MDN web docs word-wrap
I want to design a form which consists of a table that has a text-box and a drop-down list. When I add the drop-down list, the form gets distorted. I have these problems:
1) list is so wide. I need to make its width fits the widest text.
2) Also the height of the cells somehow increased.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<div id="wrapper">
<table align='center' cellspacing=1 cellpadding=1 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
<tr>
<td><input type="text" id="text-field"></td>
<td><select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select> </td>
<td><input type="button" class="add" id="submit-button" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
NOTE: There is a third column not shown in the image. It contains a button as shown in the code.
The problem seems to be in the header of your table. You have 2 columns in the first row and 3 columns in the second row.
To keep symmetry use the following standardized code:
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="text-field">
</td>
<td>
<select name="D1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</td>
<td>
<input type="button" class="add" id="submit-button" value="Add Row">
</td>
</tr>
</tbody>
What I have done is, I added standard and of HTML table, and added 3rd column in the header Action. You can rename it according to your need.
You will have to check your CSS as well. It might effect the form you have created!
I am using Bootstrap and have a part in my code that is:
<table class="table">...</table>
In my header, I have the tag <meta name="viewport" content="width=device-width"> This actually works fine(I can see the whole table on my website) but when I add <meta name="viewport" content="width=device-width initial-scale=1"> like is suggested on many websites, my table doesn't fit the 320 px width viewport that I have been using to test and I have to scroll to see the whole table.
Further investigation and playing around with the css for .table shows that I can't manually set width below 385 px. I have tried searching "bootstrap table 385 px" but it doesn't seem like there is anything special about this number so I am wondering why the table can't be smaller. Does anyone have any ideas as to how I can make the table smaller or make it scale correctly to initial-scale=1?
Edit #1:
<table class="table">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td width=70%>
<input class="form-control" ng-model="...">
</td>
<td>
<button class="btn btn-primary" ng-click="...">...</button>
</td>
</tr>
<tr ng-repeat="... in ...">
<td class="claimedby-{{...}}">
<input type="checkbox" ng-model="..." ng-click="..."> {{...}}
</td>
<td>
<input type="checkbox" ng-model="..." ng-click="..."> ...
</td>
<td>
<div for="...">
<div class="...">{{...}}</div>
</div>
</td>
<td>
<button class="btn btn-danger" ng-click="...">...</button>
</td>
</tr>
</tbody>
</table>
Sorry for the "..." in certain places. I'm not sure if we're allowed to post exact code publicly. Hopefully this is enough to see what's going wrong though.
Here, this should do it for you
<table class="table">
<thead>
<tr>
<th class="col-md-4 col-xs-2">Col1</th>
<th class="col-md-4 col-xs-2">Col2</th>
<th class="col-md-4 col-xs-8">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input type="checkbox" ng-model="..."> ...
</td>
<td>
<input class="form-control" ng-model="...">
</td>
<td>
<button class="btn btn-primary" ng-click="...">...</button>
</td>
</tr>
<tr ng-repeat="... in ...">
<td class="claimedby-{{...}}">
<input type="checkbox" ng-model="..." ng-click="..."> {{...}}
</td>
<td>
<input type="checkbox" ng-model="..." ng-click="..."> ...
</td>
<td>
<div for="...">
<div class="...">{{...}}</div>
</div>
</td>
<td>
<button class="btn btn-danger" ng-click="...">...</button>
</td>
</tr>
</tbody>
</table>
I have two radio buttons what I want is that when I select one of them then a drop down list should appear and when other one is marked then drop down list should disappear and instead of it a text message should be displayed.
The code for this part is as follows --
<head>
<script type="text/javascript">
function showhide(r){
var t=r.form['mode'];
if (r.value=='none') {
t.setAttribute('disabled','disabled');
document.getElementById('data').innerHTML="option not supported";
}
else {
t.removeAttribute('disabled');
}
t.style.display=r.value;
}
</script>
</head>
<body>
<table>
<tr>
<td width="400" height="40">Protocol</td>
<td>
<table width="100%" name="table">
<tr>
<td style="text-align:center">
<input type="radio" name="protocol" value="" id="opt1" align="left" checked="checked" onclick="showhide(this)" />opt1
</td>
<td style="text-align:center">
<input type="radio" name="protocol" value="none" id="opt2" align="right" onclick="showhide(this)"/>opt2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="400" height="40">Mode of Operation</td>
<td id="data">
<select name="mode" id="mode">
<option value="opt1">TCP</option>
<option value="opt2">UDP</option>
</select>
</td>
</tr>
</table>
</bdoy>
Now the text message ("option not supported") is displayed once and then it doesn't disappear when switching between the radio buttons and so drop down list doesn't appear again.Where am i getting wrong?? If possible make correction in the code.
Please correct me..
<td name="data">
must be
<td id="data">