title: Why can't I add rows dynamically to my HTML table?
body: <p>I have read many articles so far and tried so many different ways to add rows dynamically to my HTML table, but nothing is working. When I click the add button [ + ], it's not adding a row. For some reason looks like it's not letting me add cells too, when I am do: <code>newCell = newRow.insertCell()</code>. My <code>newRow</code> variable can't find the <code>insertCell()</code> method. </p>
  
  <p>This is my table: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table ID="newDataTable" runat="server" width="400"&gt;
  &lt;tr runat="server"&gt; 
      &lt;td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "50"&gt;
          &lt;label style="font-size:smaller"&gt; CITY: &lt;/label&gt;
      &lt;/td&gt;
      &lt;td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "80"&gt;
          &lt;input id= "City_box" type="text" name="tb_CITY"/&gt;
      &lt;/td&gt;
      &lt;td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "75"&gt;
          &lt;label style="font-size:smaller"&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;STATE: &lt;/label&gt;
      &lt;/td&gt;
      &lt;td runat="server" nowrap="nowrap" bordercolor="#FFFFFF" width= "90"&gt;
          &lt;input id= "State_box" type="text" name="tb_STATE"/&gt;
      &lt;/td&gt;
      &lt;td runat="server" align="left" bordercolor="#FFFFFF" width= "10"&gt;
          &lt;input title="Add Row" id="addButton" type="button" value=" + " onclick="addRow()" /&gt;
      &lt;/td&gt; 
      &lt;td runat="server" align="left" bordercolor="#FFFFFF" width= "10"&gt;
          &lt;input title="Remove Row" id="deleteButton" type="button" value=" - " onclick="removeRow(this)" /&gt;
      &lt;/td&gt; 
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And here is the <a href="http://www.codeproject.com/KB/scripting/DHTMLGrid.aspx" rel="nofollow">Javascript</a> I am using:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  //add a new row to the table
  function addRow() 
  {
      //add a row to the rows collection and get a reference to the newly added row
      var newRow = document.getElementById('newDataTable').insertRow(-1);
  
      //add 3 cells (&lt;td&gt;) to the new row and set the innerHTML to contain text boxes
  
      var newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;label style='font-size:smaller'&gt; CITY: &lt;/label&gt;";
  
      newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;input type='text' name='tb_CITY'/&gt;";
  
      newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;label style='font-size:smaller'&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;STATE: &lt;/label&gt;";
  
      newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;input type='text' name='tb_STATE'/&gt;";
  
      newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;input title='Add Row' name='addButton' type='button' value=' + ' onclick='addRow()' /&gt;";
  
      newCell = newRow.insertCell();
      newCell.innerHTML = "&lt;input title='Remove Row' name='deleteButton' type='button' value=' - ' onclick='removeRow(this)' /&gt;";
  }
  
  //deletes the specified row from the table
  function removeRow(src) 
  {
      /* src refers to the input button that was clicked. 
      to get a reference to the containing &lt;tr&gt; element,
      get the parent of the parent (in this case &lt;tr&gt;)
      */
      var oRow = src.parentElement.parentElement;
  
      //once the row reference is obtained; delete it passing in its rowIndex
      document.all("newDataTable").deleteRow(oRow.rowIndex);
  }    
  &lt;/script&gt;
  </code></pre>