Auto-increment the ID in an html table with javascript-CodePudding

I have a basic table structure:

<tr>
   <th>ID</th>
   <th>Name</th>
</tr>
<tr>
    <td>1</td>
    <td>John</td>
</td>

My javascript function:

function newRow() {

  var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  var lastRow = tbodyRef.rows[tbodyRef.rows.length - 1];
  var lastCell = lastRow.cells[lastRow.cells.length -1];

  // Insert a row at the end of table
  var newRow = tbodyRef.insertRow();
  
  // Insert a cell at the end of the row
  var newCell = newRow.insertCell();
  newCell.innerHTML = lastCell.id  ;
  newCell = newRow.insertCell();
  newCell.innerHTML = "Alex";
}

Currently calling the function only generates '0' in ID column, how can I increment it?

CodePudding user response：

Try to run the following:

function newRow() {

  var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
  var lastRow = tbodyRef.rows[tbodyRef.rows.length - 1];
  var lastCell = lastRow.cells[lastRow.cells.length - 1];

  // Insert a row at the end of table
  var newRow = tbodyRef.insertRow();
  
  // Insert a cell at the end of the row
  var newCell = newRow.insertCell();
  newCell.innerHTML = lastRow.rowIndex 1;
  newCell = newRow.insertCell();
  newCell.innerHTML = "Alex";
}

A working example with JS Fiddle: http://jsfiddle.net/o30gxeda/1/

CodePudding user response：

Check my below snippet I used Template Literals and querySelector() method with easy way to achieve and count rows length and increment by 1.

Helpful Link:
https://www.w3schools.com/js/js_string_templates.asp https://www.w3schools.com/jsref/met_document_queryselector.asp

function newRow() {
    var tbodyRef = document.querySelector('#myTable tbody');
    tbodyRef.innerHTML =`
    <tr>
        <td>${tbodyRef.rows.length   1}</td>
        <td>Alex</td>
    </tr>`;
}

<table id="myTable" width="100%" border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th align="left">ID</th>
            <th align="left">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
        </tr>
    </tbody>
</table>

<br>
<button type="button" onclick="newRow()">Add New Records</button>