Jump to content

How to add more duplicated child nodes in table columns


frwa

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...