0
184
ViewsCómo insertar una fila en la tabla a través de la función Javascript
Estoy tratando de insertar otra fila en una tabla con pie de página.
Aquí está mi código:
function submit(){ /* Some code here with declarations & value assignings*/ let tble = document.getElementById("tabl"); let newEl = document.createElement("tr"); newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>"; tble.appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild); } Mi función me da el siguiente resultado: 
Como puede ver (EN LA VENTANA DE INSPECCIÓN DE ELEMENTOS), la nueva fila se inserta después del pie de página. Cómo agregarlo correctamente
- después de la última fila de la tabla?
·
Santiago Trujillo
2 answers
Answer question0
No inserte el elemento directamente en el elemento <table> , sino seleccione <tbody> en su lugar.
Puedes hacer eso así:
function submit(){ let tble = document.getElementById("tabl"); let newEl = document.createElement("tr"); newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>"; tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild); } Pero no debe usar innerHTML para crear la fila (podría crear una vulnerabilidad XSS), use innerText o textContent en su lugar. Pero eso significa que debe crear los <td> de manera diferente:
function submit(){ let tble = document.getElementById("tabl"); let newEl = document.createElement("tr"); appendTD(newEl, nowSr); appendTD(newEl, taskForm); appendTD(newEl, tagForm); appendTD(newEl, "Rs. "+amountForm); tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild); } function appendTD(tr, text){ const td = document.createElement('td') td.innerText = text tr.appendChild(td) }
·
Santiago Trujillo
Report
0
tbody empujar al cuerpo en lugar de la mesa directamente.
function addTableRow(){ const tbody = document.querySelector('#myTable tbody') const newRow = document.createElement('tr') newRow.innerHTML = `<td>Foo</td><td>Bar</td>` tbody.appendChild(newRow) } <table id="myTable"> <thead> <tr> <th>Helo</th> <th>World</th> </tr> </thead> <tbody> <tr> <td>Foo</td> <td>bar</td> </tr> </tbody> </table> <button onclick="addTableRow()">Add row</button>
·
Santiago Trujillo
Report
Answer question