Click here to Skip to main content
14,931,331 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>

<link rel="stylesheet" type="text/css" href="style.css">
    <SCRIPT language="javascript">
      function addRow(tableID) {
            var table = document.getElementById(tableID);
			var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
			var colCount = table.rows[0].cells.length;
			for(var i=0; i < colCount; i++) {
			var newcell = row.insertCell(i), cellNode =null;
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
				cellNode = newcell.childNodes[0];
				switch(cellNode.type) {
					case "checkbox":
					cellNode.checked = false; = "checkBox_"+i;


<div class="createPerson">
    <h2> Add New Person </h2>
    <ul class="newPerson">
       <li class="liPerson">First Name:<input type="textbox" name="fName" /> </li>
       <li class="liPerson">Last Name: <input type="textbox" name ="lName" /></li>



    <TABLE id="dataTable" cellspacing="0" borderspacing='1' style='border: solid 1px black'>
        <tr id="g">
         <TD><INPUT type="checkbox" name="chk" id='checkBox_0' onclick="highlight(document.getElementById('checkBox_0'), document.getElementById('g'))"  /></TD>
         <th id="fName">First Name</th>
         <th>Last Name</th>

    <INPUT type="button" value="Delete Checked People" class="btnDelete" onclick="deleteRow('dataTable')" />
    <INPUT type="button" value="Add Person" class="btnAdd" onclick="addRow('dataTable')" />

Updated 2-Dec-14 9:40am
syed shanu 2-Dec-14 19:56pm
Check this link :
mudgilsks 5-Dec-14 8:15am
What exactly are you asking? This is not clear.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900