title: Reorder dynamic table in html using javascript
body: <p>I have a html page where i add rows and delete rows dynamically. Now my goal is to reorder the rows which updated id.</p>
  
  <p>for example i have 3 column in a row in which the 3rd column is given a id based on the rowid. so once i delete a row , i need to reorder this id. is this possible using javascript.</p>
  
  <p>Sample code is here
      
      </p>
  
  <pre><code>&lt;SCRIPT language="javascript"&gt;
        function addRow(tableID) {
  
             var table = document.getElementById(tableID);
  
             var rowCount = table.rows.length;
             var row = table.insertRow(rowCount);
  
             var cell1 = row.insertCell(0);
             var element1 = document.createElement("input");
             element1.type = "checkbox";
             cell1.appendChild(element1);
  
             var cell2 = row.insertCell(1);
             cell2.innerHTML = rowCount ;
  
             var cell3 = row.insertCell(2);
             var element2 = document.createElement("input");
             element2.type = "text";
             element2.id = "batch"+rowCount;
             cell3.appendChild(element2);
  
        }
  
        function deleteRow(tableID) {
             try {
             var table = document.getElementById(tableID);
             var rowCount = table.rows.length;
  
             for(var i=0; i&lt;rowCount; i++) {
                  var row = table.rows[i];
                  var chkbox = row.cells[0].childNodes[0];
                  if(null != chkbox &amp;&amp; true == chkbox.checked) {
                       table.deleteRow(i);
                       rowCount--;
                       i--;
                  }
  
             }
             }catch(e) {
                  alert(e);
             }
        }
  
   &lt;/SCRIPT&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code> &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt;
  
   &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt;
  
   &lt;TABLE id="dataTable" width="350px" border="1"&gt;
        &lt;TR&gt;
        &lt;/TR&gt;
   &lt;/TABLE&gt;
  </code></pre>
  
  <p>
  </p>