title: javascript dynamic input fields
body: <p>I have a problem with JavaScript dynamic input fields. I have three fields, one with a number and two with <code>a</code> &amp; <code>b</code>. My problem is displaying the <code>b</code> input field under the <code>a</code> input field.</p>
  
  <p>My code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script language="JavaScript" type="text/javascript"&gt;
  function addRowToTable()
  {
      var tbl = document.getElementById('tblSample');
      var lastRow = tbl.rows.length;
      // if there's no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow);
  
      // left cell
      var cellLeft = row.insertCell(0);
      var textNode = document.createTextNode(iteration);
      cellLeft.appendChild(textNode);
  
      // right cell
      var cellRight1 = row.insertCell(1);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'element_45_1' + iteration;
      el.id = 'element_45_1' + iteration;
      el.size = 40;
  
      //el.onkeypress = keyPressTest;
      cellRight1.appendChild(el);
  
      // right cell
      var cellRight2 = row.insertCell(2);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'element_45_2' + iteration;
      el.id = 'element_45_2' + iteration;
      el.size = 40;
  
      //el.onkeypress = keyPressTest;
      cellRight2.appendChild(el);
  
      // right cell
      var cellBottom3 = row.insertCell(3);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'element_45_12' + iteration;
      el.id = 'element_45_12' + iteration;
      el.size = 40;
  
      //el.onkeypress = keyPressTest;
      cellBottom3.appendChild(el); 
  }
  
  function removeRowFromTable()
  {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length;
    if (lastRow &gt; 2) tbl.deleteRow(lastRow - 1);
  }
  &lt;/script&gt;
  
  &lt;form action="tableaddrow_nw.html" method="get"&gt;
     &lt;table width="540" border="1" id="tblSample"&gt;
      &lt;tr&gt;
        &lt;th colspan="3"&gt;Sample table&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="8"&gt;1&lt;/td&gt;
        &lt;td width="240"&gt;
          &lt;input type="text" name="element_45_1"
                 id="element_45_1" size="40" /&gt;
        &lt;/td&gt;
        &lt;td width="20"&gt;
          &lt;div1&gt;
            a.&amp;nbsp;
            &lt;input type="text" name="element_45_2"
                   id="element_45_2" size="40" /&gt;
          &lt;/div1&gt;
        &lt;/td&gt;
        &lt;td width="20"&gt;
          b.&amp;nbsp;
          &lt;input type="text" name="element_45_12"
                 id="element_45_12" size="40" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/form&gt;
  &lt;p&gt;
    &lt;input type="button" value="Add" onclick="addRowToTable();" /&gt;
    &lt;input type="button" value="Remove" onclick="removeRowFromTable();" /&gt;
  &lt;/p&gt;
  </code></pre>