title: Javascript table child not showing as undefined?
body: <p>We have a script below where it add rows dynamically. In the addRow function we have this code alert(newcell.childNodes[0].type); to capture the childnode type. It only show the first column as checkbox but all the rest is shown as undefined. In addition for the 4th column we have more then one child node that one button and also a table in it? So how to know their types?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script language="javascript"&gt;
          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&lt;colCount; i++) {
  
                  var newcell = row.insertCell(i);
  
                  newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                  newcell.innerHTML = newcell.innerHTML;
                  alert(newcell.childNodes[0].type);
  
          }
       }
  
          function addSubRow2(subtbl){
              var table = document.getElementById(subtbl);
              var rowCount = table.rows.length;
        var a=document.getElementById(subtbl).insertRow(rowCount); 
            var b=a.insertCell(0); 
            var c=a.insertCell(1); 
            b.innerHTML="TEST"; 
            c.innerHTML="&lt;p class=error id='slaveIDError'&gt;"; 
  
  
        /* var dropdown="&lt;SELECT class=\"select\" name=\"country\"&gt;\n" +
                  "&lt;OPTION value=\"1\"&gt;Serial 1&lt;\/OPTION&gt;\n" +
                  "&lt;OPTION value=\"2\"&gt;Serial 2&lt;\/OPTION&gt;\n" +
                  "&lt;OPTION value=\"3\"&gt;Serial 3&lt;\/OPTION&gt;\n" + 
                  "&lt;OPTION value=\"4\"&gt;Serial 4&lt;\/OPTION&gt;" +
                  "&lt;OPTION value=\"5\"&gt;Serial 5&lt;\/OPTION&gt;" + 
                  "&lt;\/SELECT&gt;";
         */
  
  
          //cell.innerHTML += "&lt;br\/ &gt;" + dropdown;
      }
  
  
          function deleteRow(tableID) {
              try {
              var table = document.getElementById(tableID);
              var rowCount = table.rows.length;
  
              for(var i=0; i&lt;rowCount; i++) {
                  var row = table.rows[i];
                  var chkbox = row.cells[0].childNodes[0];
                  if(null != chkbox &amp;&amp; true == chkbox.checked) {
                      if(rowCount &lt;= 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);
              }
          }
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    Begin Location : &lt;select class='select' id="beginLocation" name="beginLocation"&gt;
                      &lt;option value="1"&gt;Loc 1&lt;/option&gt;
                      &lt;option value="2"&gt;Loc 2&lt;/option&gt;
                      &lt;option value="3"&gt;Loc 3&lt;/option&gt;
                      &lt;option value="4"&gt;Loc 4&lt;/option&gt;
                      &lt;option value="5"&gt;Loc 5&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;p type="text" class=error id='beginLocation_Error'&gt;
      &lt;br\&gt;
      &lt;input type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
  
      &lt;input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
  
      &lt;table id="dataTable" width="350px" border="1"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Client&lt;/th&gt;
            &lt;th&gt;Location&lt;/th&gt;
            &lt;th&gt;Serial&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td id="col_0_0"&gt;&lt;input type="checkbox" name="chk"/&gt;&lt;/td&gt;
              &lt;td id="col_0_1"&gt;
                  &lt;select class='select' id="client1" name="client1"&gt;
                      &lt;option value="1"&gt;Client 1&lt;/option&gt;
                      &lt;option value="2"&gt;Client 2&lt;/option&gt;
                      &lt;option value="3"&gt;Client 3&lt;/option&gt;
                      &lt;option value="4"&gt;Client 4&lt;/option&gt;
                      &lt;option value="5"&gt;Client 5&lt;/option&gt;
                  &lt;/select&gt;&lt;p type="text" class=error id='client_0_Error'&gt;                
              &lt;/td&gt;
  
              &lt;td id="col_0_1"&gt;
                  &lt;select class='select' id="location1" name="location1"&gt;
                    &lt;option value="1"&gt;Loc 1&lt;/option&gt;
                      &lt;option value="2"&gt;Loc 2&lt;/option&gt;
                      &lt;option value="3"&gt;Loc 3&lt;/option&gt;
                      &lt;option value="4"&gt;Loc 4&lt;/option&gt;
                      &lt;option value="5"&gt;Loc 5&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;p type="text" class=error id='beginLocation_Error'&gt;                
              &lt;/td&gt;
  
              &lt;td id="col_0_3"&gt;
                  &lt;input type="button" value="Add Serial" onclick="addSubRow2('sub0');" /&gt;
                  &lt;br\&gt;
                  &lt;table id="sub0"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;select class='select' id="serial_0_1" name="serial_0_1"&gt;
                                  &lt;option value="1"&gt;Serial 1&lt;/option&gt;
                                  &lt;option value="2"&gt;Serial 2&lt;/option&gt;
                                  &lt;option value="3"&gt;Serial 3&lt;/option&gt;
                                  &lt;option value="4"&gt;Serial 4&lt;/option&gt;
                                  &lt;option value="5"&gt;Serial 5&lt;/option&gt;
                              &lt;/select&gt;
                         &lt;/td&gt;
                         &lt;td&gt;
                           &lt;input type="text" id="txt_0_1" name="txt_0_1"&gt;                        
                         &lt;/td&gt;
                         &lt;td&gt;
                           &lt;input type="button" value="Remove" onclick="removeSubRow2(this.parentNode);" /&gt;                       
                         &lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                       &lt;td&gt;
                       &lt;p  class=error id="selecterror_0_1"&gt;
                      &lt;/td&gt;
                       &lt;td&gt;
                       &lt;p class=error id="inputerror_0_1"&gt;
                      &lt;/td&gt;   
                      &lt;td&gt;
  
                      &lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/table&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code to update row and column id</p>
  
  <pre><code>var rows = table.querySelectorAll('[id^=row]');
            for (var i = 0, row; row = table.rows[i]; i++) {
                    row.id="row"+i;
                    row.name="row"+i;
                    var rowName = "row"+i;
                    for (var j = 0, col; col = row.cells[j]; j++) {
                       col.id="col_"+i+"_"+j;
                       col.name="col_"+i+"_"+j;
  
                       if(j==3)
                       {
                          alert(col.childNodes[0].getElementsByTagName('button')[0]);
  
                       }
                }
  </code></pre>