Использование флажка для изменения стиля строки таблицы

Question

У меня есть динамически сгенерированная таблица из n строк с флажком в каждой строке. Как сделать так, чтобы у строки таблицы был другой цвет фона, когда установлен ее флажок?

У меня нет проблем с использованием jQuery, если это необходимо.

Answer 1

Если вы используете jQuery, очень просто:

$("tr :checkbox").live("click", function() {
    $(this).closest("tr").css("background-color", this.checked ? "#eee" : "");
});

Живой пример

По сути, это идентифицирует флажки, содержащиеся в строке, отслеживает клики по ним, а затем использует их состояние в обработчике событий, чтобы установить стиль CSS background-color для строки, содержащей флажок.

Что нужно рассмотреть, чтобы увеличить / изменить:

• Я использовал live в случае, если таблица динамическая на клиенте (например, если вы добавляете или удаляете строки), хотя вы можете предпочесть использовать delegate root вместо этого в таблице. Если таблица будет полностью статичной, вы можете просто использовать click.
• Вышеуказанные хуки все флажки внутри строк, что, вероятно, больше, чем вы хотите. jQuery поддерживает почти все селекторы CSS3 и , чуть больше , так что вы можете создать селектор для флажков, чтобы сделать его более узким. Основным изменением будет фильтрация по классу ($("tr :checkbox.foo"), где "foo" - класс) или по имени флажка ($("tr :checkbox[name=foo]")).
• Как Мортен предлагает ниже , вы можете подумать о добавлении / удалении класса, а не о предоставлении значений CSS непосредственно в коде, поскольку это помогает отделить ваш сценарий от стиля.

Answer 2

$('tr :checkbox').live('click', function () {
    $(this).closest('tr').toggleClass('selected_row_style');
});

Answer 3

$("checkbox").live("click", function()
{ 
    if (this.checked) 
    {
       $(this).attr('background-color','#FFFFFF');
    }
    else
    {
       $(this).attr('background-color','#000000');
    }
}