<Span>
<input type="button" id="btnAdd" value="Add Row" onclick="addDemoRow('tblSample')">
<input type="button" id="btnDelete" value="Delete Rows" onclick="removeDemoRow('tblSample')">
</span>
<table id="tblSample" border="1" cellspacing="2" cellpadding="10">
<tr>
<td>Checkbox</td>
<td>Sample value</td>
</tr>
</table>
<-- FUNCTION TO ADD ROW -->
function addDemoRow(id) {
<-- We get the table object based on given id -->
var objTable = document.getElementById(id);
<-- We insert the row by specifying the current rows length -->
var objRow = objTable.insertRow(objTable.rows.length);
<-- We insert the first row cell -->
var objCell1 = objRow.insertCell(0);
<-- We insert a checkbox object -->
var objInputCheckBox = document.createElement("input");
objInputCheckBox.type = "checkbox";
objCell1.appendChild(objInputCheckBox);
<-- We insert the second row cell -->
var objCell2 = objRow.insertCell(1);
var currentDate = new Date()
<-- We add some text inside the celll -->
objCell2.innerHTML = "You add me on " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
}
<-- FUNCTION TO DELETE ROW -->
function removeDemoRow(id) {
<-- We get the table object based on given id -->
var objTable = document.getElementById(id);
--< Get the current row length -->
var iRow = objTable.rows.length;
<-- Initial row counter -->
var counter = 0;
<-- Performing a loop in the table -->
if (objTable.rows.length > 1) {
for (var i = 0; i < objTable.rows.length; i++) {
<-- Get checkbox object -->
var chk = objTable.rows[i].cells[0].childNodes[0];
if (chk.checked) {
<-- if checked we del -->
objTable.deleteRow(i);
iRow--;
i--;
counter = counter + 1;
}
}
<-- Alert user if there is now row is selected to be deleted -->
if (counter == 0) {
alert("Please select the row delete.");
}
}else{
<-- Alert user if there are no rows being added -->
alert("There are no rows added");
}
}
<input type="button" id="btnAdd" value="Add Row" onclick="addDemoRow('tblSample')">
<input type="button" id="btnDelete" value="Delete Rows" onclick="removeDemoRow('tblSample')">
</span>
<table id="tblSample" border="1" cellspacing="2" cellpadding="10">
<tr>
<td>Checkbox</td>
<td>Sample value</td>
</tr>
</table>
<-- FUNCTION TO ADD ROW -->
function addDemoRow(id) {
<-- We get the table object based on given id -->
var objTable = document.getElementById(id);
<-- We insert the row by specifying the current rows length -->
var objRow = objTable.insertRow(objTable.rows.length);
<-- We insert the first row cell -->
var objCell1 = objRow.insertCell(0);
<-- We insert a checkbox object -->
var objInputCheckBox = document.createElement("input");
objInputCheckBox.type = "checkbox";
objCell1.appendChild(objInputCheckBox);
<-- We insert the second row cell -->
var objCell2 = objRow.insertCell(1);
var currentDate = new Date()
<-- We add some text inside the celll -->
objCell2.innerHTML = "You add me on " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
}
<-- FUNCTION TO DELETE ROW -->
function removeDemoRow(id) {
<-- We get the table object based on given id -->
var objTable = document.getElementById(id);
--< Get the current row length -->
var iRow = objTable.rows.length;
<-- Initial row counter -->
var counter = 0;
<-- Performing a loop in the table -->
if (objTable.rows.length > 1) {
for (var i = 0; i < objTable.rows.length; i++) {
<-- Get checkbox object -->
var chk = objTable.rows[i].cells[0].childNodes[0];
if (chk.checked) {
<-- if checked we del -->
objTable.deleteRow(i);
iRow--;
i--;
counter = counter + 1;
}
}
<-- Alert user if there is now row is selected to be deleted -->
if (counter == 0) {
alert("Please select the row delete.");
}
}else{
<-- Alert user if there are no rows being added -->
alert("There are no rows added");
}
}
