01.<HTML>
02.<HEAD>
03. <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
04. <SCRIPT language="javascript">
05. function addRow(tableID) {
06.
07. var table = document.getElementById(tableID);
08.
09. var rowCount = table.rows.length;
10. var row = table.insertRow(rowCount);
11.
12. var cell1 = row.insertCell(0);
13. var element1 = document.createElement("input");
14. element1.type = "checkbox";
15. cell1.appendChild(element1);
16.
17. var cell2 = row.insertCell(1);
18. cell2.innerHTML = rowCount + 1;
19.
20. var cell3 = row.insertCell(2);
21. var element2 = document.createElement("input");
22. element2.type = "text";
23. cell3.appendChild(element2);
24.
25. }
26.
27. function deleteRow(tableID) {
28. try {
29. var table = document.getElementById(tableID);
30. var rowCount = table.rows.length;
31.
32. for(var i=0; i<rowCount; i++) {
33. var row = table.rows[i];
34. var chkbox = row.cells[0].childNodes[0];
35. if(null != chkbox && true == chkbox.checked) {
36. table.deleteRow(i);
37. rowCount--;
38. i--;
39. }
40.
41. }
42. }catch(e) {
43. alert(e);
44. }
45. }
46.
47. </SCRIPT>
48.</HEAD>
49.<BODY>
50.
51. <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
52.
53. <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
54.
55. <TABLE id="dataTable" width="350px" border="1">
56. <TR>
57. <TD><INPUT type="checkbox" name="chk"/></TD>
58. <TD> 1 </TD>
59. <TD> <INPUT type="text" /> </TD>
60. </TR>
61. </TABLE>
62.
63.</BODY>
64.</HTML>
