title: How do I loop through children objects in javascript?
body: <p>I have this code in a function:</p>
  
  <pre><code>tableFields = tableFields.children;
  for (item in tableFields) {
      // Do stuff
  }
  </code></pre>
  
  <p>According to a console.log of tableFields, I am getting an array back as I assume I need to do. A console.log of item within the loops returns undefined. What do I have to do to loop through tableFields and insert each object into a table?</p>
  
  <p>console log of tableFields:</p>
  
  <pre><code>HTMLCollection[label, input, label, input 25, label, input, input, input Remove]
  
  
  0
  label
  
  1
  input
  
  2
  label
  
  3
  input 25
  
  4
  label
  
  5
  input
  
  6
  input
  
  7 
  input Remove
  
  description[]
  input
  
  hours[]
  input
  
  invoice_number
  input
  
  getlength
  8
  
  rate[]
  input 25
  
  item
  item()
  
  iterator
  iterator()
  
  namedItem
  namedItem()
  
  __proto__
  HTMLCollectionPrototype { item=item(), namedItem=namedItem(), iterator=iterator()}
  </code></pre>
  
  <p>Here is the entire section of code as I have so far:</p>
  
  <pre><code>$this-&gt;title("Test");
      $this-&gt;defaultMenu();
      $select = "";
      $names = Customer::getNames();
      foreach ($names as $id =&gt; $name) {
          $select .= '&lt;option value="'.$id.'"';
          if ($this-&gt;customerid == $id) $select .= ' selected ';
          $select .= '&gt;'.$name.'&lt;/option&gt;';
      }
  
      $form = '
  &lt;script type="text/javascript"&gt;
  
  var counter = 0;
  
  function isEven(int){
  int = Number(int);
  return (int%2 == 0);
  }
  
  
  
  function moreLabor() {
  
      var table = document.getElementById("editTable");
      var tableFields = document.getElementById("readroot");
  
      tableFields = tableFields.children;
      console.log(tableFields);
      for (item in tableFields) {
  
          if (isEven(counter)) {
              var tableRow = table.insertRow(-1);
              var label = tableRow.insertCell(-1);
              console.log(tableFields[item]);
              label.appendChild(tableFields[item]);
  
          } else {
              var field = tableRow.insertCell(-1);
              field.innerHTML = item.innerHTML;
  
  
          }
  
          counter++;
      }
  
      console.log();
  var insertHere = document.getElementById("writeroot");
  }
  
  window.onload = function(){
      document.getElementById(\'moreLabor\').onclick = function(){ moreLabor(); }
      moreLabor();
  }
  
  
  &lt;/script&gt;
  
  &lt;div id="readroot" style="display: none"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;label for="hours"&gt;Hours:&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="hours[]" value="" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;label for="rate"&gt;Rate:&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="rate[]" value="25" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;label for="description"&gt;Description:&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="description[]" value="" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;input type="hidden" name="invoice_number" value="'.$this-&gt;number.'" /&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="button" value="Remove"
      onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/div&gt;
  
  &lt;form method="POST" class="invoice" id="edit"&gt;
  &lt;table id="editTable"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;Work Order Number:&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="number" value="'.$this-&gt;number.'"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;Customer:&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;select name="customerid"&gt;'.$select.'&lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;span id="writeroot"&gt;&lt;/span&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" id="moreLabor" value="Add labor"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="submit" name="Save" value="Save" /&gt;&lt;/td&gt;
      &lt;/tr&gt;';
      if (!is_null($this-&gt;id)) {
          $form .= '&lt;input type="hidden" name="id" value="'.$this-&gt;id.'"/&gt;';
      }
      $form .= '&lt;/table&gt;&lt;/form&gt;';
  
  
  
      $this-&gt;component($form);
  </code></pre>