1

Tengo la siguiente tabla que muestra datos de una base de datos

<table class="table table-striped table-hover order-table">
   <thead>
      <tr>
         <th>Foto</th>
         <th>Nombre</th>
         <th>Correo electrónico</th>
         <th>Telefono</th>
         <th>Status</th>
         <th>Actions</th>
         <th></th>
      </tr>
   </thead>
   <?php
      $mysqli = getConn();
      $query = "SELECT * FROM red_carpinteros";
      $result = $mysqli->query($query);
      //echo "<h2>$query</h2>";
   ?>
   <tbody id="muestra">
   <?php
     while($row = $result->fetch_array(MYSQLI_ASSOC)){
        $status = $row['status'];?>
      <tr>
         <?php if (file_exists("fotos/foto_".$row['id_carpintero'].".jpg") == true){ ?> 
            <td>
               <img src='fotos/foto_<?php echo $row['id_carpintero']?>.jpg' class='card-img'  width='60' height='60'>
            </td>
            <?php } else{ ?>
            <td>
               <img src='http://ssl.gstatic.com/accounts/ui/avatar_2x.png' class='card-img'>
            </td>
            <?php } ?>
            <td><?php echo $row['nombre'] ?></td>
            <td><?php echo $row['email'] ?></td>
            <td><?php echo $row['telefono'] ?></td>
            <td>
               <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input active" id="status" name="status[]>" value="<?php echo $row['id_carpintero']?>" <?php if($status == 1){ echo"checked"; }?>>
                  <label class="custom-control-label" for="status"></label>
               </div>
            </td>
         <td>
            <a href="#" class="image"><i class="material-icons" data-toggle="tooltip" title="Editar portafolio">&#xe410</i></a>
            <a href="#editCarp" id="btn_edit" class="edit" value="<?php echo $row['id_carpintero']; ?>"><i class="material-icons" data-toggle="tooltip" title="Editar">&#xE254;</i></a>
         </td>
         <td>
            <a href="#deleteCarp?id=<?php echo $row['id_carpintero']?>" id="btn_delete" class="delete" value="<?php echo $row['id_carpintero']; ?>" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
         </td>
      </tr>
      <?php } ?>
   </tbody>
</table>

Al final tiene algunos botones de modificar y eliminar (que funcionan perfectamente para cada usuario mostrado) pero en la columna "Status" tiene un switch que al momento de cambiarlo, debería de cambiar el status en la base de datos, pero solo me deja manipular el primer switch de toda la tabla, asi cliquee el de otro usuario, solo cambia el primero siempre.

Este es el jQuery

$(document).on('click','#status',function(){
   carpintero=$(this).attr('value');
   alert(carpintero);
});
2
  • El ID debe ser único en el documento y lo estás repitiendo para cada checkbox, agrega "status" dentro de la clase class="custom-control-input active status" y cambia la función por $(document).on('click', '.status', function() { /* Aquí tu código */ });
    – Triby
    Commented el 14 dic. 2020 a las 18:19
  • @Triby Coloqué status dentro del class y el id le agregue status_<id> para que fuera distinto por cada fila, pero ahora se mantiene estatico todos los switch, ya no funciona ninguno, ni sale la alert en el jquery
    – lugm
    Commented el 14 dic. 2020 a las 18:57

1 respuesta 1

0

Como te dije en comentario, el ID debe ser único y no debe repetirse; la opción es manipular los elementos por su clase:

  1. Crear ID único con: id="status-<?php echo $row['id_carpintero']; ?>"
  2. Asignar a la etiqueta el ID del checkbox que le corresponde con: for="status-<?php echo $row['id_carpintero']; ?>"
  3. Agregar status a clase: class="custom-control-input active status"
  4. El código Javascript debe estár debajo del HTML
  5. Asignar evento por clase y no por ID, remplazando #status por .status
  6. Este paso no es necesario, pero sí muy recomendable: En lugar de delegar los eventos al documento (document), asigna el evento directamente a los checkbox por clase con $('.status').on(...)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover order-table">
   <thead>
      <tr>
         <th>Foto</th>
         <th>Nombre</th>
         <th>Correo electrónico</th>
         <th>Telefono</th>
         <th>Status</th>
         <th>Actions</th>
         <th></th>
      </tr>
   </thead>
   <tbody id="muestra">
     <tr>
         <td>Foto 1</td>
         <td>Nombre 1</td>
         <td>Email 1</td>
         <td>Teléfono 1</td>
         <td>
               <div class="custom-control custom-switch">
                  <!--
                     Para que funcione con clic en la etiqueta:
                     - El input debe tener ID único
                     - La etiqueta debe tener atributo for con ese ID único
                  -->
                  <input type="checkbox" class="custom-control-input active status" name="status[]" id="status-1" value="1" checked>
                  <label class="custom-control-label" for="status-1">Status</label>
               </div>
         </td>
         <td></td>
     </tr>
     <tr>
         <td>Foto 2</td>
         <td>Nombre 2</td>
         <td>Email 2</td>
         <td>Teléfono 2</td>
         <td>
               <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input active status" name="status[]" id="status-2" value="2" checked>
                  <label class="custom-control-label" for="status-2">Status</label>
               </div>
         </td>
         <td></td>
     </tr>
     <tr>
         <td>Foto X</td>
         <td>Nombre X</td>
         <td>Email X</td>
         <td>Teléfono X</td>
         <td>
               <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input active status" name="status[]" id="status-X" value="X" checked>
                  <label class="custom-control-label" for="status-X">Status</label>
               </div>
         </td>
         <td></td>
     </tr>
   </tbody>
</table>

<script>
// Asegúrate de que el script está debajo del HTML
// Escuchar clics solo los que tienen la clase "status"
$('.status').on('click', function() {
   carpintero=$(this).attr('value');
   alert(carpintero);
});
</script>

5
  • Correcto @Triby, borré el id, y coloque status en la clase input, pero ahora no me deja manipular ninguno de los checkbox <input type="checkbox" class="custom-control-input active status" name="status[]" value="<?php echo $row['id_carpintero']?>" <?php if($status == 1){ echo"checked"; }?>>
    – lugm
    Commented el 14 dic. 2020 a las 19:39
  • @lugm, ¿cambiaste también la función? Ejecuta el fragmento de código y verás que sí funciona.
    – Triby
    Commented el 14 dic. 2020 a las 19:41
  • si, utilice la última función ya que no agrego nuevas filas con jquery, efectivamente funciona el fragmento, pero en mi código ya no deja manipular los checkbox
    – lugm
    Commented el 14 dic. 2020 a las 19:51
  • Revisa la respuesta actualizada, donde intento evitar cualquier posible causa de errores, ejecuta el fragmento de código y verás que funciona correctamente.
    – Triby
    Commented el 14 dic. 2020 a las 20:36
  • muchísimas gracias @Triby , ya funcionó! Te lo agradezco mucho :)
    – lugm
    Commented el 14 dic. 2020 a las 20:42

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.