Tengo una estructura de tabla básica:
<tr> <th>ID</th> <th>Name</th> </tr> <tr> <td>1</td> <td>John</td> </td>Mi función javascript:
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"; }Actualmente, llamar a la función solo genera '0' en la columna de ID, ¿cómo puedo incrementarlo?
Intenta ejecutar lo siguiente:
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"; }Un ejemplo de trabajo con JS Fiddle: http://jsfiddle.net/o30gxeda/1/
Verifique mi fragmento a continuación. Usé Template Literals y el método querySelector() con una manera fácil de lograr y contar la rows length e increment by 1 .
Enlace útil:
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>