Как изменить цвет строки в таблице

Question

Я занимаюсь разработкой таблицы в формате HTML. У каждой строки есть флажок с тем же именем атрибута, что и у тега tr. Поэтому я хочу покрасить выбранную строку в желтый, если это сырье является выбранным уникальным, в противном случае выделите синим все выбранные строки. Итак, я разработал это:

var checked = $("input[@type=checkbox]:checked");  
                var nbChecked = checked.size(); 
                if(nbChecked==1){
                   var row = $('tr[name*="'+checked.attr("name")+'"]');
                   row.style.backgroundColor="#FFFF33";
                }

Но цвет не меняется :( Скажи мне, почему? Ты можешь мне помочь?

<TR valign=top name="<?php echo $not[$j]['name'];?>">
        <TD width=12 style="background-color:#33CCCC">
        <div class="wpmd">
            <div align=center>
                <font color="#FF0000" class="ws7">
                    <input type="checkbox" name="<?php echo $not[$j]['name'];?>" onchange="analizeCheckBox()"/>
            </div>
.
.
.
.
.
.

Answer 1

Во-первых, у вас есть цвет фона в ячейке, а не в строке. Вы должны переместить его.

Вот ваш фиксированный HTML:

<table>
  <tr style="vertical-align:top; background-color:#33CCCC">
    <td style="width:12px">
      <div class="wpmd">
        <div class="ws7" style="text-align:center; color:#FF0000">
          <input type="checkbox" />
        </div>
      </div>
    </td>
  </tr>
</table>

и тогда этот скрипт будет работать

$("td .ws7 input[type=checkbox]").bind({
  click: function()
  {
    if ($(this).is(":checked"))
    {
      $(this).closest("tr").css("background-color", "#ffff33");
    }
    else
    {
      $(this).closest("tr").css("background-color", "#33CCCC");
    }          
  }
});​

измените селектор "td .ws7" в соответствии с вашими потребностями.

Пример.

Answer 2

Когда вы вызываете функцию jQuery $() со строкой селектора, она возвращает объект jQuery, который похож на массив , даже если только 1 или 0 элементов соответствуют . Итак, ваш код:

row = $('tr[name*="'+checked.attr("name")+'"]');
row.style.backgroundColor="#FFFF33";

Не работает, потому что row это , а не элемент DOM со свойством style, это объект jQuery, который похож на массив с большим количеством дополнительных методов. Доступ к отдельным совпадающим элементам DOM можно получить с помощью записи в стиле массива, например:

row[0].style.backgroundColor = "#FFFF33";

Будет работать для обновления первого соответствующего элемента DOM. Если ничего не найдено, то row[0] будет неопределенным, и вы получите ошибку. row.length скажет вам, сколько элементов соответствует.

В вашем коде:

var checked = $("input[@type=checkbox]:checked");

Вам не нужен символ @ для сопоставления имен атрибутов, поэтому "input[type=checkbox]:checked" в порядке, но "input:checkbox:checked" проще.

Итак, наконец-то дойдем до вашего фактического требования, , когда один ряд имеет флажок, чтобы установить желтый цвет фона этой строки, но если несколько строк имеют флажки, чтобы установить фон всех этих строк. на синий, вы можете сделать это только с тремя строками кода:

// reset all trs to default color
$("tr").css("background-color", "yourdefaultcolorhere");
// select the checked checkboxes
var checked = $("tr input:checkbox:checked");
// set the checked checkboxes' parent tr elements' background-color
// according to how many there are
checked.closest("tr").css("background-color",
                          checked.length===1 ? "yellow" : "blue");

Обратите внимание, что вам вообще не нужно выбирать по атрибуту name, потому что метод .closest() jQuery позволит вам найти элементы tr, к которым принадлежат отмеченные флажки.

РАБОЧАЯ ДЕМО: http://jsfiddle.net/FB9yA/

Answer 3

Хотя этот код не дает вам полной информации о функциональности, он выполняет обновление строк.

http://jsfiddle.net/4QKe9/5/

Вот Javascript:

function updateRows() {
    var checked = $("input:checked");
    var nbChecked = checked.size();
    if (nbChecked == 1) {
        checked.parent().parent().css("background", "#FFFF33");
    }
}

$(function () { $("input:checkbox").click(updateRows)});​