We have snippet of codes as below and able to add the row accordingly. In column 2 we have another add combo button which we wish to add copy of the combo and also to be able to delete it with also a <p> to later show if there is any error message. We are not able to do it dynamically when press the Add Combo button which suppose to the addSubRow function. Another thing we have this loop below and is showing [0] as undefined and [1] as the button whereas button is the first element in the cell? Thank you. for(var k=0 ; k<cels.childElementCount ; k++) { alert("J :"+j+" "+"K :"+k+" "+cels.childNodes[k].type); } Code (markup): <HTML> <HEAD> <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; newcell.innerHTML = newcell.innerHTML +"<br> TEST"; //alert(newcell.childNodes[2].type); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; newcell.childNodes[0].id = "input" + rowCount; break; case "checkbox": newcell.childNodes[0].checked = false; newcell.childNodes[0].id = "checkbox" + rowCount; break; case "select-one": newcell.childNodes[1].selectedIndex = 0; newcell.childNodes[1].id = "col_" + rowCount+"_2"; break; } /*if(newcell.childNodes[0].type=="button") { alert("TEST"); newcell.childNodes[0].id=rowCount; }*/ } var table = document.getElementById(tableID); var rows = table.getElementsByTagName('tr'); for (var i = 0, row; row = table.rows[i]; i++) { row.id="row"+i; row.name="row"+i; var rowName = "row"+i; //iterate through rows //rows would be accessed using the "row" variable assigned in the for loop for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns //columns would be accessed using the "col" variable assigned in the for loop col.id="col_"+i+"_"+j; col.name="col_"+i+"_"+j; var cels = rows[i].getElementsByTagName('td')[j]; var realKids = 0,count = 0; kids = cels.childNodes.length; while(count < kids){ if(cels.childNodes[i].nodeType != 3){ realKids++; } count++; } ///alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount); //alert(); for(var k=0 ; k<cels.childElementCount ; k++) { alert("J :"+j+" "+"K :"+k+" "+cels.childNodes[k].type); } } } } function addSubRow(tableID,colID) { var tdID = document.getElementById(colID); var table = document.getElementById(tableID); var new_comboBox = table.rows[0].cells[2].childNodes[1].innerHTML; tdID.appendChild(new_comboBox); } 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--; } } var table = document.getElementById(tableID); for (var i = 0, row; row = table.rows[i]; i++) { row.id="row"+i; //iterate through rows //rows would be accessed using the "row" variable assigned in the for loop for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns //columns would be accessed using the "col" variable assigned in the for loop //alert("J : "+j); col.id="col"+i; if(j==0) { } else if(j==1) { } } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <TABLE id="dataTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk"/></TD> <TD><INPUT type="text" name="txt"/></TD> <TD id="col_0_2"> <INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" /> <br> <SELECT class='select' id="cold_0_2" 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><p type="text" class=error id='countryID_0_2_Error'> </TD> </TR> </TABLE> </BODY> </HTML> Code (markup):