Estoy creando una aplicación y en esta aplicación tengo que agregar elementos en una tabla, y me gustaría agregar una casilla de verificación en cada línea que agrego, pero tengo problemas para intentar hacerlo. ¿Sabría cómo agregar una casilla de verificación en cada línea que agrego en la tabla?
a continuación está el código donde agrego línea por línea a mi tabla
function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects data.forEach((d, i) => { var tr = nl.insertRow(i); Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML var cell = tr.insertCell(j); cell.innerHTML = d[k]; // Assign object values to cells }); nl.appendChild(tr); }) }Traté de hacer algo como
tr.append("<td> <div class='form-control'>\ <input type='checkbox' /> \ <label for='chk'/>select</div>\ </td>");Pero eso solo agrega un texto a mi tabla y no la casilla de verificación en sí.
<div id="table-wrapper" class="table-responsive"> <table class="table table-hover" id="PartData"> <thead> <tr> <th scope="col">#</th> <th scope="col">FUNÇÃO</th> <th scope="col">DESCRIÇÃO</th> <th scope="col">QUANTIDADE</th> <th scope="col">FABRICANTE DO PAINEL</th> <th scope="col">PEÇA</th> <th scope="col">REVISÃO</th> </tr> </thead> <tbody> <tr> </tr> </tbody> </table> </div>arriba está mi código HTML.
¡Gracias por adelantado!
Como dijo Teemu en los comentarios, la solución fue "Cree la celda en el bucle como si hubiera creado las otras celdas. Luego, en lugar de agregar, use insertAdjacentHTML para agregar el HTML para el botón. Tenga en cuenta que esto debe hacerse después de configurar innerHTML, de lo contrario, dicha propiedad anula todo lo que había en la celda".
Así que esa es mi función final:
function addDataToTbody(nl, data) { // nl -> NodeList, data -> array with objects data.forEach((d, i) => { var tr = nl.insertRow(i); //cell2.type = checkbox; Object.keys(d).forEach((k, j) => { // Keys from object represent th.innerHTML console.log(j) var cell = tr.insertCell(j); cell.innerHTML = d[k]; // Assign object values to cells }); tr.insertAdjacentHTML('beforeEnd', "<td> <div class='form-control'>\ <input id = 'deleteChck' type='checkbox' /> \ <label for='chk'/>Delete</div>\ </td>"); nl.appendChild(tr); }) }Y funciona