es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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!

Tags:  , , ,

Answer

  1. Avatar for 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étodo createElement. Aquí está el código modificado:

    function addDataToTbody(nl, data) { // nl -> NodeList, data -> array de objetos
      data.forEach((d, i) => {
        var tr = nl.insertRow(i);
        Object.keys(d).forEach((k, j) => { // Las llaves de los objetos representan th.innerHTML
          var cell = tr.insertCell(j);
          cell.innerHTML = d[k]; // Asignar los valores de los objetos a las celdas   
        });
        var checkboxCell = tr.insertCell();
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkboxCell.appendChild(checkbox);
        nl.appendChild(tr);
      })
    }
    

    Aquí, agregamos un nuevo elemento td al tr de cada fila y un elemento de casilla de verificación a éste, utilizando el método createElement. 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.

Comments are closed.