title: How to add rows dynamically in a html table
body: <p>I want to add rows dynamically in a HTML table and the number of the column should be fixed. After adding rows I want to input some text values in each row and column. After entering the text values I want to store it in a database table. How to do that? Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function addRow() {
          var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
          var rows = root.getElementsByTagName('tr');
          var clone = cloneEl(rows[rows.length - 1]);
          root.appendChild(clone);
      }
      function addColumn() {
          var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
          while (r = rows[i++]) {
              c = r.getElementsByTagName('td');
              clone = cloneEl(c[c.length - 1]);
              c[0].parentNode.appendChild(clone);
          }
      }
      function cloneEl(el) {
          var clo = el.cloneNode(true);
          return clo;
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mytab td {
    width: 100px;
    height: 20px;
    background: #cccccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action=""&gt;
      &lt;input type="button" value="Add a Row" onclick="addRow()"&gt;
      &lt;input type="button" value="Add a Column" onclick="addColumn()"&gt;
  &lt;/form&gt;
  &lt;br&gt;
  
  &lt;table id="mytab" border="1" cellspacing="0" cellpadding="0"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" name="enter1"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="enter2"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>In this code, the problem is when I enter some text and after that, I add rows or column the same text appears in the newly added rows and column. But I want to enter different text in different boxes and I want the no of the column should be fixed to say no of the column should be 5. </p>