CB's blog

Однажды я написал небольшую JavaScript функцию, которая может кому-то оказаться полезной. Она позволяет выбирать столбцы таблицы для отображения с помощью чекбоксов.

Вот код:

function toggle_col(id_table, col_num)
{
   // Выбираем таблицу по id
   var tab = document.getElementById(id_table);

   // Считываем информацию с соответствующего чекбокса
   var is_checked = document.getElementById(id_table + "_cbx" + col_num).checked;
   // Выбираем CSS свойство display
   var display_type = is_checked ? "" : "none";

   // Применяем display_type ко всем ячейкам столбца
   for(var i=0; i<=tab.rows.length-1; i++)
      tab.rows[i].cells[col_num].style.display = display_type;
}

Пример использования:

toggle_col("tab1", 1);

В таблице с id tab1 включает (или выключает) 2-й столбец (столбцы пронумерованы 0, 1, …).

Небольшая демка — по ссылке.

Возможные улучшения (большинство я даже как-то реализовывал, некоторые описал в предыдущих заметках):

• Генерация элементов управления таблицей (см. демку — там это список с чекбоксами) на клиентской части, исходя из содержания thead’а таблицы.
• Запоминание в cookie имен или номеров выбранных для отображения столбцов, с восстановлением сохраненного состояния при загрузке.
• Запрет на отключение некоторых столбцов.
• Стилизация таблицы в зависимости от структуры выбранных столбцов.
• Полосатость таблицы.
• Сортировка таблицы.
• Добавление строк в таблицу.
• Удаление строк из таблиц.

Отдельно можно упомянуть различные видео-эффекты. Я, например, решил поиграться с прозрачностью. Смотреть пример с добавлением эффекта прозрачности (хорошо работает в FF, кое-как работает в IE 6). Напомню, что основная демка — здесь.