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

Question

У меня есть 5 столбцов в таблице.Столбец 1 имеет флажок с именем name = "strurl1", name = "strurl2", name = "strurl3" и т. Д. Если выбран этот параметр, фоновый цвет строки таблицы должен измениться с # f1f1f1 на # e5e5e5.

Я пытался, но код не работает.

Основной css:

.overviewtable tbody tr td {
    line-height:normal;
    border-top:1px solid #FFF;
    border-bottom:1px solid #c4c4c4;
    height:35px;
    padding-top:10px;
    padding-bottom:5px;
    background-color:#f1f1f1;
}

.overviewtable tbody tr td.col1 {
    width:316px;
    padding-left:15px;
    border-left:4px solid #FFF;
    font-size:12px;
    color:#999999;
}

Столбцы таблицы называются col1, col2, col3, col4 и col5.

AnyПомогите?Заранее спасибо.

Answer 1

Вы хотите выделить строку? Используйте метод .closest (), чтобы получить элемент строки, затем добавьте к нему класс подсветки: http://jsfiddle.net/etVc8/3/

$(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
    });
});

Answer 2

<input type="checkbox"  onclick='highlight(this)'> 1<br>
<input type="checkbox"  onclick='highlight(this)'> 2<br>
<input type="checkbox"  onclick='highlight(this)'> 3<br> 




<script>
    function highlight(obj){
       $(obj).parent().parent().css("background","#000");
    }
</script>

Answer 3

Я указал цвет фона в классе tbody tr td , как показано ниже:

.overviewtable tbody tr td {
  line-height:normal;
  border-top:1px solid #FFF;
  border-bottom:1px solid #c4c4c4;
  height:35px;
  padding:10px 0 5px 0;
  background-color:#f1f1f1;
}

Если я использую следующий скрипт, он подсвечивает только col1 , то есть столбец, содержащий флажок. Я буду col1 до col5 , то есть вся строка, которая будет выделена:

$(function() {
   $('td:first-child input').change(function() {
       $(this).closest('table.overviewtable tbody tr td').toggleClass("highlight", this.checked);
   });
});