Авто-селект чекбоксов в таблице
Прошу прощения, вопрос наверняка очень элементарный.
Но я только сейчас начал изучать jQuery (а также JS и CSS). Я думаю, что знатоки мне сразу же дадут ответ, т.к. задача стандартная. Постановка задачи: Есть таблица, в которой надо реализовать функционал чекбокса "выбрать все". Т.е. стандартно, в шапке есть чекбокс, если его выбрать, то все чекбоксы данного столбца автоматически тоже должны ставиться в checked == true. Предложенное мною решение: 1. На чек-бокс в шапке таблицы вешаем JS-функцию 2. Ко всем нужным чекбоксам внутри таблицы цепляем пустой класс (чтобы можно было впоследствии их идентифицировать по имени этого класса). В итоге, JS-функция выглядит следующим образом: function selectAllRows(param) { jQuery('.columnCheckBoxStyleClass').each(function() {this.checked = param}); } Возникшая проблема: Всё прекрасно работает до тех пор, пока на странице всего одна такая таблица. Но когда на странице таких таблиц две, то при нажатии на чекбокс в одной из таблиц происходит выборка строк сразу в двух таблицах. Решение тут напрашивается следующее, при вызове функции необходимо передавать id таблицы, в которой надо оперировать со строками. Но вот КАК и ЧТО делать с этим id таблицы, я не знаю, т.к. jQuery только начал изучать. Вопрос: Как преобразовать тело функции, чтобы имея на входе 2 параметра (id таблицы и проставляемый параметр в чекбоксы), проставить/убрать галки с чекбоксов только требуемой таблицы? Спасибо за помощь :) |
$('#idnaблицы.columnCheckBoxStyleClass')
|
Вот блиииин :-E
Дело в том, что я использую не голый HTML, а JSF. Поэтому на клиент выплевывается HTML c айдишником таблицы вот в таком формате: 'formId:tableId'. Т.е. всё, что находится в кавычках - это и есть айдишник таблицы. И когда в JS пытается выполниться вот такое: jQuery('ormId:tableId.columnCheckBoxStyleClass').each(function() {this.checked = param}); То в консоль выдается сообщение: "Неизвестный псевдокласс или псевдоэлемент «tableId»." |
Может так:
jQuery('[id="formId:tableId"].columnCheckBoxStyleClass').each(function() {this.checked = param}); или jQuery(document.getElementById('formId:tableId')).filter('.columnCheckBoxStyleClass').each(function() {this.checked = param}); |
Спасибо, exec.
Оба предложенных варианта не работают, но они меня подтолкнули к одной мысли, начал экспериментировать и в итоге нашел правильное решение. Вот так все корректно работает: function selectAllRows(rootElementId,param) { jQuery('.columnCheckBoxStyleClass', document.getElementById(rootElementId)).each(function() {this.checked = param}); } Но насколько это "правильное" решение, я не знаю. Может быть кто-нибудь прокомментирует на предмет оптимальности того, как я предлагаю? |
Часовой пояс GMT +3, время: 17:03. |