Как выбрать строку в таблице с помощью jquery?

Question

Я создал таблицу в своем приложении, я хочу выбрать (изменить цвет фона) целую строку при нажатии флажка, так же, как это делает gmail. Когда мы нажимаем флажок в gmail, вся строка становится желтой.

<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>

Скажите, пожалуйста, как сделать то же самое в jquery?

Answer 1

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

Создайте класс CSS (называемый «diffColor» выше) и добавьте цвет фона таким образом, например:

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

Не устанавливайте атрибуты CSS напрямую. Используйте классы, где это возможно.

Answer 2

Ответ Клетуса правильный, но я думаю, что его можно немного улучшить:

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

Единственные реальные различия здесь:

1. что он выбирает только первый родитель <tr>. ... вы никогда не знаете, где ваш код может закончиться, плюс, теоретически, это будет на пару тиков быстрее.
2. проверяет новое значение флажка и добавляет или удаляет класс по мере необходимости. Без проверки этого другой код может изменить класс diffColour в строке, и тогда ваш флажок будет инвертирован, если вы поймете, что я имею в виду.

Кроме того, вы можете рассмотреть возможность привязки этой функции к обработчику change:

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

Answer 3

Для выбора строк таблицы вы можете использовать простой класс, который я написал, под названием TableRowSelector . Оформить заказ и пример кода здесь