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

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

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

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

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

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

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

<div>
<input id="allr" name="test" type="radio" />Показать все<br>
<input id="r1" name="test" type="radio" />Черный<br>
<input id="r2" name="test" type="radio" />Белый
</div>

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

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

<table>
<tbody>
<tr class="black">
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
</tr>
<tr class="white">
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
</tr>
<tr class="black">
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
<td width="164" style="background-color: #000000; color: #ffffff; font-weight: bold;">Черный ряд</td>
</tr>
<tr class="white">
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
<td width="164">Белый ряд</td>
</tr>
</tbody>
</table>

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

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

<script>

//нужно задать переменные, которые соответствуют классам
//каждая последующая задается через raw[следующий порядковый номер]
var raw = [];

raw[0] = document.getElementsByClassName('black'); 
raw[1] = document.getElementsByClassName('white'); 


//удалите эту часть, если вам не нужен переключатель /Показать все/
//переменная для /Показать все/
var allraws = document.getElementById('allr');
allraws.>
Единственное изменение которое нужно сделать в скрипте – это задать переменные, которые соответствуют классам (рядам таблице), то есть выполнить поиск элементов с определенным классом. Делается это с помощью getElementsByClassName. В скрипте эти переменные уже помещены в массив, поэтому задаются они так:
 
var raw = [];

raw[0] = document.getElementsByClassName('black'); 
raw[1] = document.getElementsByClassName('white'); 
 
Начало подсчета начинается с нуля. Если классов в таблице больше, чем два, то следующая переменная будет:
 
raw[2] = document.getElementsByClassName(‘имя_класса’);  
и так далее.
 
Для вашего скрипта, вам понадобиться только заменить классы black и white на классы с вашей таблицы и добавить новые переменные, если у вас больше переключателей, чем два.
 
Когда все переменные введены и всем рядам таблицы присвоены нужные классы, скрипт работает и показывает магию Javascript :)