In this example we explain that how to Add or remove Table rows dynamically using jQuery in asp.net.or how to insert or delete table rows dynamically using jQuery. Or how to add new rows dynamically to html table when click on add button using jQuery. Or how to remove table rows when click on delete button using jQuery.
Here we demonstrate that how to dynamically create the
html table rows using jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add (Insert) / Remove (Delete) Table Rows
dynamically using jQuery</title>
</head>
<body>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script
type="text/javascript">
$(function
() {
//Build
an array containing Employee records.
var
employees = new Array();
employees.push(["Kirit", "Software
Developer"]);
employees.push(["Rahul", "QC"]);
employees.push(["Punit", "Accountant"]);
//Insert
the data rows.
for
(var i = 0; i < employees.length; i++) {
InsertRow(employees[i][0],
employees[i][1]);
}
});
function
Insert() {
InsertRow($("#txtName").val(), $("#txtDesignation").val());
$("#txtName").val("");
$("#txtDesignation").val("");
};
function
InsertRow(name, country) {
//Get
the reference of the Table's TBODY element.
var
tBody = $("#tblemployees > TBODY")[0];
//Insert
Row.
row = tBody.insertRow(-1);
//Insert
Name cell.
var
cell = $(row.insertCell(-1));
cell.html(name);
//Insert
Country cell.
cell = $(row.insertCell(-1));
cell.html(country);
//Insert
Button cell.
cell =
$(row.insertCell(-1));
var
btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
};
function
Remove(button) {
//Determine
the reference of the Row using the Button.
var
row = $(button).closest("TR");
var
name = $("TD", row).eq(0).html();
if
(confirm("Do you want to delete: "
+ name)) {
//Get
the reference of the Table.
var
table = $("#tblemployees")[0];
//Delete
the Table row using it's Index.
table.deleteRow(row[0].rowIndex);
}
};
</script>
<table
id="tblemployees"
cellpinserting="0"
cellspacing="0"
border="1">
<thead>
<tr>
<th>
Name
</th>
<th>
Designation
</th>
<th>
</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" id="txtName" />
</td>
<td>
<input type="text" id="txtDesignation" />
</td>
<td>
<input type="button" onclick="Insert()" value="Insert" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
0 comments:
Post a Comment