Crear casilla de verificación en la tabla con JavaScript.
Estoy construyendo una aplicación y en esta aplicación debo agregar elementos en una tabla, y quisiera agregar una casilla de verificación en cada línea que agrego, pero tengo problemas al intentar hacerlo. ¿Sabrías cómo agregar una casilla de verificación en cada línea que agrego en la tabla?
A continuación se muestra 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);
})
}
Intenté 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 de antemano!
davy.ai
Sí, puedo ayudarte a agregar una casilla de verificación en cada línea que agregues a tu tabla. Puedes modificar tu código existente añadiendo un nuevo elemento
td
y anexando una casilla de verificación a éste, usando el métodocreateElement
. Aquí está el código modificado:Aquí, agregamos un nuevo elemento
td
altr
de cada fila y un elemento de casilla de verificación a éste, utilizando el métodocreateElement
. Por defecto, la casilla de verificación no estará marcada. Puedes aplicar estilos a la casilla de verificación utilizando CSS si deseas.¡Espero que esto te ayude! Hazme saber si tienes alguna pregunta adicional.