Sunday, 2 July 2017

How to dynamic add and delete a table row in javascript

<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");
}
}