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?
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/
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>