0

soy nuevo programando y mi pregunta es la siguiente, Tengo una tabla HTML que se llena en automático de acuerdo a los registros de la Base, quisiera que al seleccionar cualquier checkbox, me arrojara una alerta mostrando Id, nombre y Ap_Materno, de la fila correspondiente. Hice una prueba asignando al id y value del checkbox, los valores de la tabla, pero solo me arroja el id y nombre, mas no el apellido, esto quisiera hacerlo con Javascrip

Mi tabla

<?php
//Se incluye la conexion
    include_once 'conexion.php';

    $sql = "SELECT * FROM registros";
    $stmt = $conexion->prepare($sql);
    $stmt->execute();
    $resultado = $stmt-> get_result();
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="estilo.css">

    <title>Listado de Personas</title>
</head>

<body>
    <br><br>
        <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" id="<?php echo $fila ['id']; ?>" name="checkname" value="<?php echo $fila ['nombre']; ?>" class="classchk"></td>
                                <td id="id"><?php echo $fila ['id']; ?></td>
                                <td id="nombre"><?php echo $fila ['nombre']; ?></td>
                                <td id="ap_pat"><?php echo $fila ['ap_paterno']; ?></td>
                                <td id="ap_mat"><?php echo $fila ['ap_materno']; ?></td>
                            </tr>
                        <?php }; ?> 
                           
                    </tbody>
                    </table>
        </div>
</body>
<script src="alerta.js"></script>
</html>

Mi Funcion en JS

var tabla=document.getElementById("tabla"); 
tabla.addEventListener('change', function(e){ 
  e.preventDefault(); /
    var checkboxes = document.getElementsByName('checkname'); 
      for(var i=0; i<checkboxes.length; i++){ 
        if(checkboxes[i].checked==true){ 
          alert("El id seleccionado es: "+checkboxes[i].id+" y nombre es: "+checkboxes[i].value); 
        }
      }    
});
8
  • los td no tienen valores; tienen texto entre sus etiquetas de apertura y cierre.
    – user46896
    Commented el 29 sept. 2022 a las 16:09
  • no has indicado que resultado tiene el javascript; algun error o no es lo esperado? tienes que agregar mas datos ya que tu codigo no se puede reproducir.
    – user46896
    Commented el 29 sept. 2022 a las 16:10
  • @ArcanisGK507 el resultado del TD es el valor que tiene cada campo en la DB Commented el 29 sept. 2022 a las 16:23
  • @ArcanisGK507 el resultado que muestra el JS es el ID y el Nombre, esto seleccionando cada Chek, pero requiero que me muestre Id, nombre y ap_paterno al seleccionar un check Commented el 29 sept. 2022 a las 16:24
  • ok entonces tiene un mal concepto; primero que nada la tabla no tiene evento de cambio ... quien cambia es el checkbox...
    – user46896
    Commented el 29 sept. 2022 a las 16:25

1 respuesta 1

0

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.

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.

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>

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.

4
  • MIL GRACIAS, esto era la que buscaba, ahora solo una cuestión, si fuesen mas columnas, puedo asignar el numero de celda a través de un ciclo, sin necesidad de agregarlos manualmente Commented el 29 sept. 2022 a las 17:36
  • @AlbertoCordova claro, puedes hacer algo así: var str=""; for (var i = 1; i < tr.cells.length; i++) { str+= ``${tr.cells[i].innerText}``; En la concatenación de str pon solo un backstick al inicio y otro al final, puse dos en el comentario para que se vea bien. Mejor lo pondré en la respuesta. } console.log(str);` He empezado el bucle en la posición 1 para que salte al checkbox.
    – A. Cedano
    Commented el 29 sept. 2022 a las 18:01
  • Mil gracias por tan valiosa ayuda y consejos brindados Commented el 29 sept. 2022 a las 18:43
  • @AlbertoCordova me alegro de haberte ayudado. Si la respuesta dada ha resuelto tu problema puedes marcarla como aceptada, de modo que la pregunta no aparezca como sin resolver. Saludos.
    – A. Cedano
    Commented el 29 sept. 2022 a las 18:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.