This post helps you to make dynamic table. You can do
following task using this post code
- Add a row dynamically
- Check duplicate value
- Delete a row
| Product | Action |
|---|
HTML Code
<head>
<title>Girfa :
DynamicTable Management </title>
<script>
var tblrowid=0
function
AddScheduleTOTable()
{
{
tblrowid++;
var HTML = ""
HTML = "<tr
id='row" + tblrowid + "'><td >" + $("#ddl
option:selected").val() + "</td><td><a
href='javascript:void(0)' onclick=DeleteTableRow('" +
tblrowid + "')>Delete
</a></td></tr>";
$("#tbl").append(HTML);
}
else
alert('This
item type has been added previously');
}
function CheckDuplicateInTable(text)
{
var flag = true;
var table = $("#tbl
tbody");
table.find('tr').each(function (i)
{
{
var $tds =
$(this).find('td');
if
($tds.eq(0).text() == text)
flag = false;
});
return (flag);
}
function DeleteTableRow(id)
{
$("#row" +
id).remove();
tblrowid--;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1 style="text-align:center">Dynamic
Table Management </h1><hr />
<select id="ddl">
<option>Sumsung</option>
<option>LG</option>
<option>Videocon</option>
<option>Pansonic</option>
<option>Onida</option>
</select>
<input type="button" value="Add" onclick="AddScheduleTOTable()" />
<br /><br />
<table id="tbl" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr role="row"><th>Product</th><th>Action</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
</table>
</body>
</html>
No comments:
Post a Comment