Correct the serial numbers of the row after deletion using Javascript only

Question

I have two functions for adding and deleting rows in a table using Javascript:

function addRow() {
    //document.getElementById("div_dea").style.display = "none";
    document.getElementById("div_orderlist").style.display = "block";

            var table = document.getElementById("ordertable");  
            var rowcount = document.getElementById("ordertable").rows.length;       
            var row = table.insertRow(rowcount);        
            row.id="row_"+rowcount; 
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);


            // Add some text to the new cells:
            var sel =  document.getElementById("select_product_name");
            var optiontext = sel.options[sel.selectedIndex].text;
            cell1.innerHTML = rowcount;
            cell2.innerHTML = optiontext;
            cell3.innerHTML = "abc";   
}

Delete Row as follows:

function deleteRow(){
var table = document.getElementById("ordertable");
var rowcount = document.getElementById("ordertable").rows.length;   

alert("first"+rowcount);

for(var i=1;i<rowcount;i++){    
     row = table.rows[i];     
      if(document.getElementById(row.id).style.backgroundColor =="red"){          
          table.deleteRow(row.rowIndex);
      }

   }


    alert("second"+rowcount);

}

While addRow() I am adding serial numbers as: cell1.innerHTML = rowcount; I need correct the serial numbers after deletion:

The rows get deleted But alert("second"+rowcount); not even working in deletion. How can correct the serial numbers of row after deletion.

Note: Use JavaScript only

Answer 1

Use this code

    function updateRowCount(){
         var table = document.getElementById("ordertable");
         var rowcountAfterDelete = document.getElementById("ordertable").rows.length;  
         for(var i=1;i<rowcountAfterDelete;i++){    
              table.rows[i].cells[0].innerHTML=i;
          }}