Skip to main content
se añadieron 546 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

PD

Si quieres recoger todos los td sin tener que ponerlos por cada índice puedes hacer esto:

if (e.target.checked) {
    var tr = e.target.closest('tr');
    var str="";       
    for (var i = 1; i < tr.cells.length; i++) {
        str+= `${tr.cells[i].innerText}`;  
    }
    console.log(str);
    alert(str);
}

El bucle empieza en la posición 1, para ignorar el checkbox, que estaría en la posición 0 y se asume que todos los demás elementos contienen solamente texto dentro.

PD

Si quieres recoger todos los td sin tener que ponerlos por cada índice puedes hacer esto:

if (e.target.checked) {
    var tr = e.target.closest('tr');
    var str="";       
    for (var i = 1; i < tr.cells.length; i++) {
        str+= `${tr.cells[i].innerText}`;  
    }
    console.log(str);
    alert(str);
}

El bucle empieza en la posición 1, para ignorar el checkbox, que estaría en la posición 0 y se asume que todos los demás elementos contienen solamente texto dentro.

se añadieron 460 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Otra cosa, no abuses de los id y no crees id duplicados. Dado que tus elementos se crean en un bucle, si realmente necesitas los id para cada elemento debes crear un número incremental y asignarlo al final para garantizar que cada id es diferente.

Como podrás ver en la respuesta, puede que no sea necesario que cada td tenga un id. Si no necesitas diferenciarlos para algo en particular, no tienes por qué ponerles id a todos.

Aquí te dejo un ejemplo con tres filas que he construido a mano, porque no tengo el contexto PHP, con el que se crea tu tabla.

Aquí te dejo un ejemplo con tres filas que he construido a mano, porque no tengo el contexto PHP, con el que se crea tu tabla.

Otra cosa, no abuses de los id y no crees id duplicados. Dado que tus elementos se crean en un bucle, si realmente necesitas los id para cada elemento debes crear un número incremental y asignarlo al final para garantizar que cada id es diferente.

Como podrás ver en la respuesta, puede que no sea necesario que cada td tenga un id. Si no necesitas diferenciarlos para algo en particular, no tienes por qué ponerles id a todos.

Aquí te dejo un ejemplo con tres filas que he construido a mano, porque no tengo el contexto PHP, con el que se crea tu tabla.

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Primeramente, no tiene sentido agregar una escucha de eventos global sobre la tabla.

Si te interesa escuchar los cambios de los checkbox, puedes alcanzar los checkbox en particular, aquí lo hago con querySelectorAll(), alcazándolos por tipo y por nombre, por si tuvieras otros checkbox que no quieres alcanzar para este propósito.

Luego, para obtener los valores de los td de la fila que ha cambiado puedes usar closest() y a partir de ahí, obtener los datos de cada columna.

Aquí te dejo un ejemplo con tres filas que he construido a mano, porque no tengo el contexto PHP, con el que se crea tu tabla.

document.querySelectorAll("input[type=checkbox][name=checkname]").forEach(link => {
  link.addEventListener('change', function(e) {
    e.preventDefault();
    if (e.target.checked) {
      var tr = e.target.closest('tr');
      var str = `${tr.cells[1].innerText} ${tr.cells[2].innerText} ${tr.cells[3].innerText} ${tr.cells[4].innerText}`
      console.log(str);
      alert(str);
    }
  });
});
<div class="contenedor">
  <h1> Listado de Usuarios </h1>
  <table id="tabla">
    <thead>
      <tr>
        <th>Selecciona</th>
        <th>ID</th>
        <th>Nombres</th>
        <th>Apellido Paterno</th>
        <th>Apellido Materno</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($resultado as $fila){ ?>

      <!--  Se muestra el valor de cada columna en la tabla,  Asigno al check en id y value los valores que deseo obtener en la alerta -->
      <tr>
        <td><input type="checkbox" name="checkname" value="n1" class="classchk"></td>
        <td>
          1
        </td>
        <td>
          Nombre 1
        </td>
        <td>
          AP 1
        </td>
        <td>
          AM 1
        </td>
        <tr>
          <td><input type="checkbox" name="checkname" value="n3" class="classchk"></td>
          <td>
            2
          </td>
          <td>
            Nombre 2
          </td>
          <td>
            AP 2
          </td>
          <td>
            AM 2
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" name="checkname" value="n3" class="classchk"></td>
          <td>
            3
          </td>
          <td>
            Nombre 3
          </td>
          <td>
            AP 3
          </td>
          <td>
            AM 3
          </td>
    </tbody>
  </table>
</div>