CB's blog

В этой заметке я расскажу, как можно просто сделать выделение строк таблицы по клику. Будет рассмотрено три варианта: первый — самый простой, второй — с использованием библиотеки Prototype и третий — с использованием библиотеки Prototype и добавлением полосатости таблицы.

Часть 1

Для выделенных строк используется CSS класс selected.

CSS код:

tr.selected {
    background-color: #fc6;
}

JavaScript код:

window.onload = init;

function init() {
   var tab = document.getElementById('tab1');

   if(!tab) {
      return;
   }

   for(var i=tab.rows.length-1; i>=0; i--) {
      tab.rows[i].onclick = rowClick;
   }

   function rowClick() {
      this.className = this.className == "selected" ? "" : "selected";
   }
}

Пример №1 здесь.

Часть 2 — с использованием Prototype

Теперь попробуем сделать то же самое, используя популярную JavaScript-библиотеку Prototype. Функцию $ можно использовать вместо document.getElementById. Удобная функция Element.toggleClassName имеет два аргумента элемент и имя CSS класса, она добавляет CSS класс элементу (если у элемента не было такого класса) или убирает (если был).

CSS код остается прежним.

JavaScript код:

window.onload = init;

function init() {
   var tab = $('tab1');

   if(!tab) {
      return;
   }

   for(var i=tab.rows.length-1; i>=0; i--) {
      tab.rows[i].onclick = rowClick;
   }

   function rowClick() {
      Element.toggleClassName(this, "selected");
   }
}

Преимущество использования Prototype в данном случае — простая работа с множественными CSS классами, что позволяет легко расширять функциональность (см. часть 3).

Пример №2 здесь.

Часть 3 — с использованием Prototype и полосатой таблицей

Весьма уместным дополнением может стать полосатая раскраска таблицы. О том, как можно делать полосатые таблицы я уже когда-то писал. Оказывается, к предыдущему примеру добавить полосатость очень просто. Добавляется (Element.addClassName из библиотеки Prototype) CSS класс even, который присваивается непарным строкам таблицы. А потом CSS класс selected при выделении применяется ко всем строкам таблицы (tr.selected) и "even" строкам (tr.even.selected), чтобы установить цвет выделения "поверх" цвета полос таблицы.

CSS код:

tr.even {
   background-color: #edf3fe;
}

tr.selected, tr.even.selected {
   background-color: #fc6;
}

JavaScript код:

window.onload = init;

function init() {
   var tab = $('tab1');

   if(!tab) {
      return;
   }

   for(var i=tab.rows.length-1; i>=0; i--) {
      tab.rows[i].onclick = rowClick;

      // Делаем таблицу полосатой
      if(i%2==0) {
         Element.addClassName(tab.rows[i], "even");
      }
   }

   function rowClick() {
      Element.toggleClassName(this, "selected");
   }
}

Пример №3 здесь.

Update: тоже самое, но с использованием DOMAssistant вместо Prototype:

JavaScript код:

window.onload = init;

function init() {
   var tab = $('tab1');

   if(!tab) {
      return;
   }

   for(var i=tab.rows.length-1; i>=0; i--) {
      tab.rows[i].onclick = rowClick;

      if(i%2==0) {
         $(tab.rows[i]).addClass("even");
      }
   }

   function rowClick() {
      var row = $(this);

      if(row.hasClass("selected")) {
         row.removeClass("selected")
      }
      else {
         row.addClass("selected")
      }
   }
}

Пример №3 — с использованием DOMAssistant.