VPF::jQuery. выбор всех checkbox в таблице - Форум программистов

Gold Dragon

Дата 25.1.2012, 08:44 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

Есть таблица. В каждой ячейки есть checkbox. Это таблица для установки прав группам пользователей на сайт.

В настоящий момент выбор осуществляется каждого checkbox, но это не совсем удобно. Я решил добавить возможность выбора "всего столбца" и "всей строки".

Таким образом необходимо в таблице в самой верхней строке расположить checkbox`ы при выборе одного из которых будет выбираться все в этом столбце. И в последнем столбце расположить checkbox`ы при выборе одного из которых будет выбираться все в строке. Соответственно при отмене, отменяется вся строка или столбец

Как такое можно реализовать если не присваивать идентификатор каждому TD или TD?

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

$дмитрий

Дата 25.1.2012, 12:17 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45

Покажи примерный html

Gold Dragon

Дата 25.1.2012, 12:33 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

ну а что тут показывать, я уже всё описал, простая таблица

Код


<table class="adminlist" width="100%">
    <tr>
        <th></th>
        <th>Guest <input type="checkbox" /></th>
        <th>Registered <input type="checkbox" /></th>
        <th>Author <input type="checkbox" /></th>
        <th>Editor <input type="checkbox" /></th>
        <th>Publisher <input type="checkbox" /></th>
        <th>Manager <input type="checkbox" /></th>
        <th>Administrator <input type="checkbox" /></th>
        <th>Super Administrator <input type="checkbox" /></th>
    </tr>
    <tr>
        <td>Просмотр всего контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Просмотр страницы категории <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Просмотр своего контента в категории <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Просмотр всего контента категории <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Создание контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Редактирование своего контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Редактирование всего контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Удаление своего контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox" /></td>
        <td align="center"><input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Удаление всего контента <input type="checkbox" /></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
        <td align="center"><input type="checkbox"/></td>
    </tr>
</table>

--------------------

z-END

Дата 25.1.2012, 12:51 (ссылка)

(нет голосов)

Загрузка ...

прафесар™

Профиль
Группа: Комодератор
Сообщений: 3014
Регистрация: 13.3.2003
Где: Венья, Пиетари

Репутация: 3
Всего: 102

Цитата(Gold Dragon @ 25.1.2012, 09:44

)

Как такое можно реализовать если не присваивать идентификатор каждому TD или TD?

юзай селектор nthChild

--------------------

Каждый чилавек пасвоему праф...а памоему НЕТ!

Gold Dragon

Дата 25.1.2012, 12:53 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: нет
Всего: 71

Цитата(z-END @ 25.1.2012, 13:51

)

юзай селектор nthChild

да вот в нём и запутался... Если никто решение не предложит, тогда я вечерком попробую свой корявый код показать

--------------------

ksnk

Дата 25.1.2012, 12:57 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Код


$('table.adminlist tr')
    .find('td input:checkbox:eq(0)').change(function(){
        $(this).closest('tr').find('input:checkbox').not(this)
            [$(this).attr('checked')?'attr':'removeAttr']
            ('checked','checked')    
})
$('table.adminlist tr:eq(0)')
    .find('input:checkbox').change(function(){
        var col=$(this).parent('th').prevAll().length,
            func=$(this).attr('checked')?'attr':'removeAttr';
        $(this).closest('table').find('tr').each(function(){
            $('td input:checkbox',this).eq(col)
            [func]('checked','checked')
        })  
})

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

$дмитрий

Дата 25.1.2012, 13:50 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45

Код


$(function(){
    $('.adminlist td:first-child input').click(function(){
        $('input', $(this).parents('tr'))[$(this).attr('checked')?'attr':'removeAttr']('checked','checked');
    });
    th = $('.adminlist th input');
    th.click(function(t){
         $('.adminlist td:nth-child('+(th.index(this)+2)+') input')[$(this).attr('checked')?'attr':'removeAttr']('checked','checked');
    });
});

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »