How to add dynamic serial no in Javascript table

Question

I have a table which has Two button ( add & delete ). The Table contains three column (one Checkbox, one textfield and a dropdown box.) So when I click in ADD button, a new row inserted with One checkbox, One textfield and one dropdown box. What I want to do is adding one more column which will contain Serial-No. The serial-No should increase with every new row. Like...1,2,3,4 etc. Then when I want to delete a row I will tick a mark on the checkbox and press delete button and that particular row will be removed. serial-No should be re-arranged. My codes are as follows:

HTML

<div class="container">
  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
            </SELECT>
        </TD>
    </TR>
</TABLE>

Javascript

 <SCRIPT language="javascript">
       function addRow(tableID) {
        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<colCount; i++) {
            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            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;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }
</SCRIPT>

Answer 1

function addRow(tableID) {
        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<colCount; i++) {
            var newcell = row.insertCell(i);
            if(i==1){newcell.innerHTML = (rowCount+1)}
            else{
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
               }
            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;
               
            }
        }
    }

function regroup(i,rc,ti)
{
  for(j = (i+1);j<rc;j++)
    {
      document.getElementById(ti).rows[j].cells[1].innerHTML = j+1;
      }
}
function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var current = '';
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
              
                table.deleteRow(i);
                rowCount--;
                i--;
              regroup(i,rowCount,tableID);
            }
        }
        }catch(e) {
            alert(e);
        }
    }

<div class="container">
  <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
      <TD><span name = "num">1</span></TD>
        <TD><INPUT type="text" name="txt"/></TD>
        <TD>
            <SELECT name="country">
                <OPTION value="in">India</OPTION>
                <OPTION value="de">Germany</OPTION>
                <OPTION value="fr">France</OPTION>
                <OPTION value="us">United States</OPTION>
                <OPTION value="ch">Switzerland</OPTION>
            </SELECT>
        </TD>
    </TR>
</TABLE>

Try the above method and see if it works for you, I have just and a cell for the number, then when a new row is created the value for that cell in the new column is given by the number of rows added 1 for the newly created also I have included a function to update the value of the serial num cell of each of the rows after the deleted column.