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>