title: Insert row in table with auto increment Javascript
body: <p>I have a problem insert row with button Javascript. When I press the button rows insert unexpectedly as following images. Also I need delete row button similarly works. Thanks for all response.</p>
  
  <p><a href="http://i.stack.imgur.com/HAC2V.png" rel="nofollow">table image</a></p>
  
  <p>my codes</p>
  
  <pre><code>    &lt;style&gt;
      table {
          border-collapse: collapse;
          margin: 100px;
      }
  
      table, td, th {
          border: 1px solid black;
          padding: 10px;
      }
  &lt;/style&gt;
  
      table id="t1"&gt;
      &lt;tr&gt;
          &lt;th&gt;Task No&lt;/th&gt;
          &lt;th&gt;Done/In Progress&lt;/th&gt;
          &lt;th&gt;Deadline&lt;/th&gt;
          &lt;th&gt;Task&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;1.&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" /&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" style="width:100%;" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
      &lt;input style="margin-top:-200px; padding:10px" type="button" value="Add Row" onclick="add()" /&gt;
  </code></pre>
  
  <p><strong>java script:</strong> </p>
  
  <pre><code> &lt;script&gt;
      function add() {
          var num = document.getElementById("t1").rows.length;
          console.log(num);
          var x = document.createElement("tr");
  
          var a = document.createElement("td");
          var anode = document.createTextNode(num);
          a.appendChild(anode);
          x.appendChild(a);
  
          a = document.createElement("td");
          anode = document.createElement("input");
          var b = document.createAttribute("type");
          b.value = "checkbox";
          anode.setAttributeNode(b);
          a.appendChild(anode);
          x.appendChild(a);
  
          a = document.createElement("td");
          anode = document.createElement("input");
          b = document.createAttribute("type");
          b.value = "text";
          anode.setAttributeNode(b);
          a.appendChild(anode);
          x.appendChild(a);
          document.getElementById("t1").appendChild(x);
      }
  &lt;/script&gt;
  </code></pre>