frwa Posted September 17, 2012 Share Posted September 17, 2012 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); } <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> Link to comment Share on other sites More sharing options...
justsomeguy Posted September 17, 2012 Share Posted September 17, 2012 You're trying to use appendChild with a string of HTML. appendChild takes a node, not a string. If you want to duplicate all of the HTML then you need to get the innerHTML and add it to the element's innerHTML property, not with appendChild. Note that you're duplicating elements with the same ID, which is not valid. Note also that you're duplicating the entire contents, not adding 1 more select. The first time you click it will add 1, then the second time it will add 2, then 4, then 8, then 16, etc, it will double each time. You can use cloneNode if you want to make a copy of a single node: http://www.w3schools.com/jsref/met_node_clonenode.asp 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?The first node is a text node, which does not have a type attribute. That's why type is undefined. The button element is the second child node, after the text node. The text node contains the text between the end of the previous element and the start of the next. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now