resaltar - ¿Cómo seleccionar una fila en la tabla usando jquery?

seleccionar fila datatable jquery

Question

He creado una tabla en mi aplicación, quiero seleccionar (cambiar el color de fondo) toda la fila al hacer clic en una casilla de verificación, al igual que lo hace gmail. Cuando hacemos clic en la casilla de verificación en gmail, toda la fila se vuelve amarilla.

<table>
<tbody>
<tr>
<td><input type="checkbox" name="chk" id="chk" /></td>
<td>My Name</td>
<td>Description of the job</td>
</tr>
</tbody>
</table>

Por favor, dime cómo hacer lo mismo en jquery?

Answer 1

La respuesta de Cletus es correcta, pero creo que se puede mejorar un poco:

$(function() {
    $("#chk").click(function() {
        $(this)
            .parents("tr:first")
            .toggleClass("diffColor", this.checked)
        ;
    });
});

Las únicas diferencias reales aquí son:

1. que solo selecciona el primer padre <tr> . ... nunca se sabe dónde podría terminar su código, además, en teoría, será un par de tics más rápido.
2. comprueba el nuevo valor de la casilla de verificación y agrega o elimina la clase según sea necesario. Sin consultar esto, algún otro código podría cambiar la clase "diffColour" en la fila y luego su casilla de verificación estaría invertida, si sabe a qué me refiero.

Además, también podría considerar vincular esa función con el manejador de change :

$(''#chk'').bind(''click change'', function() { // ... etc

Answer 2

$(function() {
  $("#chk").click(function() {
    $(this).parents("tr").toggleClass("diffColor");
  });
});

Cree una clase CSS (llamada "diffColor" arriba) y agregue el color de fondo de esa manera, algo como:

<style type="text/css">
tr.diffColor td { background-color: yellow; }
</style>

No establezca atributos CSS directamente. Use clases cuando sea posible.

Answer 3

Para seleccionar las filas de la tabla, puede usar una clase simple que escribí llamada TableRowSelector . Verifica el ejemplo y el código de ejemplo aquí