Add or Delete HTML table rows using JavaScript

Below code snippet helps you to Add or Delete a row in HTML table on clicking a button.

Demo on jsfddle

Original Row

Original Column

Script

1. function addRow(tableID) {
2.   var table = document.getElementById(tableID);
4.   var rowCount = table.rows.length;
5.   var row = table.insertrow(rowCount);
7.   var cell1 = row.insertCell(0);
8.   var element1 = document.createElement("input");
9.   element1.type = "checkbox";
10.   element1.name="chkbox[]";
11.   cell1.appendChild(element1);
13.   var cell2 = row.insertCell(1);
14.   cell2.innerhtml = rowCount + 1;
16.   var cell3 = row.insertCell(2);
17.   var element2 = document.createElement("input");
18.   element2.type = "text";
19.   element2.name = "txtbox[]";
20.   cell3.appendChild(element2);
21. }
23. function deleteRow(tableID) {
24.   try {
25.    var table = document.getElementById(tableID);
26.    var rowCount = table.rows.length;
28.    for(var i=0; i<rowCount; i++) {
29.     var row = table.rows[i];
30.     var chkbox = row.cells[0].childNodes[0];
32.     if(null != chkbox && true == chkbox.checked) {
33.      table.deleteRow(i);
34.      rowCount--;
35.      i--;
36.     }
37.    }
38.   }
39.   catch(e) {
40.    alert(e);
41.   }
42. }

HTML

1. <input type="button" value="Add Row" onclick="addRow('datatable')" />
2. <input type="button" value="Delete Row" onclick="deleteRow('datatable')" />
3. <table id="datatable" width="350px" border="1">
4.  <tr>
5.   <td><input type="checkbox" name="chk"/></td>
6.   <td> 1 </td>
7.   <td> <input type="text" /> </td>
8.  </tr>
9. </table>