How to generate auto increment table (row and column) using PHP, Jquery and JavaScript

How to generate an auto-increment table (row and column) using PHP, Jquery, and JavaScript

To generate an auto-increment table, we have to create a table and then add a button for adding rows and deleting the rows. so let's start

Create index.php

<!-- code for adding and the rows -->
<div id="navigation" style="padding: 20px;" class="bg-secondary">
    <button  class="btn btn-success btn-sm" value="Add Row" onclick="addRow('dataTable')" >Add Row  <i class="fa fa-plus-circle"></i></button>
    <button  class="btn btn-danger btn-sm"  value="Delete Row" onclick="deleteRow('dataTable')" >Delete Row <i class="fa fa-minus-circle"></i></button>
</div>
<!-- //code for adding and the rows -->
<table>
      <thead>
        <tr>
          <th>#</th>
          <th> Requirement Name </th>
          <th> Requirement Desc </th>

		</tr>
      </thead>
      <tbody>
       <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
       </tr>
      </tbody>
</table>

The add button perfectly works. And the Sl: no increases as each row is added. I can also delete the rows too. But the problem is with numbers. Imagine that there are 7 rows. If I delete 6th row, then the rows should readjust. So I am thinking, whenever a row gets deleted, call some jQuery function, which would reset all the numbers from the first row in the incremental order. I am using the following functions in jQuery, but it doesn't work.

The following Add row script WORKS PERFECTLY.

function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var inRow = rowCount -1; 
console.log(inRow);
var row = table.insertRow(rowCount);
console.log(row);

var colCount = table.rows[0].cells.length;

for(var i=0; i<colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[inRow].cells[i].innerHTML;
    //alert(newcell.childNodes);
    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;
    }
}
}

 The delete row function also works, but the script to re-order table indexes doesn't work. So I am thinking about, once the button has been pressed to delete a row, execute a jQuery which removes the selected row at first, and then reset the indexes of all the numbers from    

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);
}
}

if you want to fix the position of the button add a row or delete a row then you can add this code 

$(document).ready(function(){
 var elementPosition = $('#navigation').offset();

$(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
          $('#navigation').css('position','fixed').css('top','0');
    } else {
        $('#navigation').css('position','static');
    }    
});
});

Thanks ❤️ for reading our course. You can comment below on how we improve our course.