Script:
<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);
newcell.innerHTML=table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type){
case "text":
newcell.childNodes[0].value="";
break;
case "checkbox":
newcell.childNodes[0].checked=false;
break;
case"select-one":
newcell.childNodes[0].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);}
}
</script>
<input value="Add Row" onclick="addRow('dataTable')" type="button">
<input value="Delete Row" onclick="deleteRow('dataTable')" type="button">
<table id="dataTable" border="1" width="350px">
<tbody><tr>
<td><input name="chk" type="checkbox"></td>
<td><input name="txt" type="text"></td>
<td>
<select name="country">
<option value="in">India</option>
<option value="de">Germany</option>
<option value="fr">France</option>
<option value="us">United States</option>
<option value="ch">Switzerland</option>
</select>
</td>
</tr>
</tbody></table>
