Hi,
I have made few changes to your code. Introduced onclick event handler to the checkbox.
-------------------------------------------------------
<HTML>
<HEAD>
<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;
cellNode.id = "checkBox_"+i;
cellNode.onclick = function (node) {
return function () {
highlight(node,row);
};
}(cellNode);
break;
case "select-one":
cellNode.selectedIndex = 0;
break;
}
}
}
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) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
catch(e) {
alert(e);
}
}
function highlight(checkBox,row)
{
var color1 = "grey", color2 ="";
row.style.backgroundColor = (checkBox.checked ? color1 : color2);
}
</SCRIPT>
</HEAD>
<BODY>
<div>
<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>
</tr>
</TABLE>
<INPUT type="button" value="Delete Checked People" class="btnDelete" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="Add Person" class="btnAdd" onclick="addRow('dataTable')" />
</div>
</BODY>
</HTML>