Скрипт исчезающих рядов таблицы в зависимости от выбранного radio checked

Скрипт исчезающих рядов таблицы в зависимости от выбранного radio checkedСкрипт исчезающих рядов таблицы в зависимости от выбранного radio checked очень удобный для представления сложных таблиц с большим количеством данных. С помощью этого скрипта ряды в таблице можно группировать, и выводить пользователю только интересующую его информацию. Например, я использовала этот скрипт для представления программы мероприятий, чтобы сгруппировать активности в зависимости от места проведения. Пример скрипта исчезающих рядов.

Задача: Существует таблица. Над ней переключатель radio. В зависимости от выбранного переключателя radio отображаются определенные ряды таблицы.

Выглядит это так:

Показать все
Черный
Белый


Черный ряд Черный ряд Черный ряд Черный ряд
Белый ряд Белый ряд Белый ряд Белый ряд
Черный ряд Черный ряд Черный ряд Черный ряд
Белый ряд Белый ряд Белый ряд Белый ряд
 

Реализация
Задача реализовывалась с помощью Javascript. На странице отдельно располагаются переключатель radio и таблица со всеми необходимыми тегами: <table><tr><td>

Важно!!! Каждый тег <input> должен содержать id r1, следующий r2 и т.д. в зависимости от количества переключателей. Для переключателя “Показать все” id должен быть allr

Переключатель radio должен выглядеть так:

В примере два переключателя “Черный” и “Белый”, которым присвоены id r1 и r2; и один переключатель “Показать все” с id=”allr”.

В соответствии с количеством переключателей, рядам таблицы будут заданы классы. Сколько переключателей, столько должно быть и классов. И никак не больше и не меньше, иначе скрипт не будет работать. В примере это классы: white и black. Эти классы присваиваются тегу <tr> и таблица выглядит таким образом:

В таблице половина рядов с классом white и половина с классом black. Количество рядов с один или другим классом не важно. Их может быть очень много, главное, чтобы классов фигурировало всего два, так как задано только два переключателя. Если классов должно быть больше, то для них вводятся новые переключатели.

После того, как на странице уже расположены переключатель и таблица, нужно разместить сам скрипт:

Единственное изменение которое нужно сделать в скрипте – это задать переменные, которые соответствуют классам (рядам таблице), то есть выполнить поиск элементов с определенным классом. Делается это с помощью getElementsByClassName. В скрипте эти переменные уже помещены в массив, поэтому задаются они так:

Начало подсчета начинается с нуля. Если классов в таблице больше, чем два, то следующая переменная будет:

raw[2] = document.getElementsByClassName(‘имя_класса’);

и так далее.

Для вашего скрипта, вам понадобиться только заменить классы black и white на классы с вашей таблицы и добавить новые переменные, если у вас больше переключателей, чем два.

Когда все переменные введены и всем рядам таблицы присвоены нужные классы, скрипт работает и показывает магию Javascript 🙂


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *