0
1.3K
VistasCómo seleccionar solo 1 fila de una tabla usando Jquery
Tengo una tabla creada donde muestro varios registros... Quiero agregar la funcionalidad de actualización usando Ajax...
He escrito el siguiente código. Cuando hago clic en cualquier fila, hace que todas las filas sean editables. Solo quiero editar la fila específica en la que hice clic.
Amablemente guíame cómo lograr esto.
<button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> <span class="glyphicon glyphicon-pencil"></span> </button> $(document).on("click", ".updateUser", function(){ $('tr td:nth-child(2)').each(function () { var html = $(this).html(); var input = $('<input type="text" />'); input.val(html); $(this).html(input); }); }); 
EDITAR - CÓDIGO HTML
<table class="table table-hover"> <thead> <tr> <th>#</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>"PHP Dynamic ID "</td> <td>"PHP Dynamic Username "</td> <td>"PHP Dynamic Password "</td> <td>"PHP Dynamic Role "</td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> <span class="glyphicon glyphicon-pencil"></span> </button> </td> <td> <button class="deleteUser btn btn-danger btn-xs" type="button" data-userId="<?php echo $id; ?>"> <span class="glyphicon glyphicon-remove"></span> </button> </td> </tr> </tbody> </table>3 Respuestas
Responde la pregunta0
Está seleccionando cada fila porque eso es exactamente lo que $('tr td:nth-child(2)') le dice que haga.
Tampoco soy un gran fanático de vincular eventos delegados en 'documento' innecesariamente; hace que sus controladores se ejecuten con demasiada frecuencia solo para verificar si hizo clic en algo relevante.
Es mejor vincular el evento más cerca de las etiquetas relevantes, ya sea en el botón de edición (y luego desplazarse hacia arriba para encontrar la fila de la tabla deseada) o en la tabla (como se muestra aquí, en caso de que necesite agregar filas mediante programación y no no quiero tener que volver a vincular eventos individuales a filas nuevas).
(Respuesta actualizada ahora que ha editado la pregunta para mostrar que desea capturar clics en un botón en lugar de en toda la fila)
$('table').on('click', '.updateRow', function() { var myTD = $(this).closest('tr').find('td:eq(1)'); // gets second table cell in the clicked row // Now do whatever to myTD, such as: $('td').removeClass('selected'); // remove any previous selections myTD.addClass('selected'); }); table {border-collapse:collapse} td {border:1px solid} .selected {background-color: red} .updateRow {color: #00F; text-decoration:underline} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><td class="updateRow">Edit:</td><td>A </td><td>B </td><td>C </td><td>Easy as</td></tr> <tr><td class="updateRow">Edit:</td><td>One </td><td>Two</td><td>Three </td><td>Or simple as</td></tr> <tr><td class="updateRow">Edit:</td><td>do </td><td>re </td><td>me </td><td>baby</td></tr> <tr><td class="updateRow">Edit:</td><td>That's</td><td>how</td><td>simple</td><td>love can be</td></tr> </table>0
El siguiente código considera todas las filas.
$('tr td:nth-child(2)')En lugar de esto, debe considerar que la fila pertenece al botón en el que se hizo clic. Esto se puede hacer con el selector más cercano. A continuación se muestra el código
$(document).on("click", ".updateUser", function() { $(this).closest('tr').find('td:nth-child(2)').each(function() { var html = $(this).html(); var input = $('<input type="text" />'); input.val(html); $(this).html(input); }); });Demostración: https://jsfiddle.net/jcvs1bg6/1/
0
Puede encontrar el contenedor principal de su botón de edición (el td), encontrar el elemento principal de ese (el tr) y obtener el elemento que necesita desde allí seleccionando un elemento secundario numerado. Por ejemplo;
$('.updateUser').click(function(){ var name_td = $(this).parents().eq(1).children().eq(1); // This gets the parent (the tr), then the second child (the send td). Eq is 0 based. })