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

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

Когда вы вызываете функцию 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 .closest() позволит вам найти элементы tr, к которым принадлежат отмеченные флажки.

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector