title: add multiple row dynamically
body: <p>This is example of my code.. 
  from the example, I've got two rows..
  What I want to do is, I want to add the two rows dynamically..
  thank you</p>
  
  <pre><code>&lt;table id="datatable"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt; 
  &lt;button type="button" id="add" onclick="addRow('dataTable')"&gt;
      &lt;b&gt;Add&lt;/b&gt;
  &lt;/button&gt;
  function addRow(tableID) {
      alert('ttt');
      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[0].cells[i].innerHTML;
          //alert(newcell.childNodes);
          switch(newcell.childNodes[0].type) {
              case "text":
                  newcell.childNodes[0].value = "";
                  break;
              case "checkbox":
                  newcell.childNodes[0].checked = false;
                  break;
              case "select-one":
                  newcell.childNodes[0].selectedIndex = 0;
                  break;
          }
      }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zLXmQ/" rel="nofollow">jsfiddle example</a></p>