<HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount + 1; var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); cell2.innerHTML = rowCount + 1; var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); cell2.innerHTML = rowCount + 1; } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <table> <TABLE border="1"> <tr> <TD><INPUT type="checkbox" name="chk"/></TD> <td>1</td> <td width="158"height="40">SR.no </td></td><td width="158">bank Statement </td><td width="158">bank process </td><td width="158">balance sheet"1"</td></tr> </table> </table> <TABLE id="dataTable" " border="1"> <TR> <TD><INPUT type="checkbox" name="chk"/></TD> <td>1</td> <TD width="158"height="40"> <INPUT type="text" style=height:40px; ></TD> <TD width="158"height="40"> <INPUT type="text" style=height:40px; ></TD> <TD width="158"height="40"> <INPUT type="text"style=height:40px; ></TD> <TD width="158"height="40"> <INPUT type="text"style=height:40px; > </TD> </TR> </TABLE> <BR><BR> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> </BODY> </HTML>
| 0 |