Подсветка строк и черезполосица, jQuery + CSS

13.06.2013  06:17

Мало сделать аккуратную таблицу на сайте. Хочется чтобы строки через одну были выделены и при наведении подсвечивалась строка под курсором мышки.

Для удобства возьмём jQuery, как самую популярную библиотеку.

Подсветка строк + черезполосица:

$(document).ready(
  function()
  {
    $("#content tbody tr").mouseover(function() {
        $(this).addClass("over");
    });
   
    $("#content tbody tr").mouseout(function() {
        $(this).removeClass("over");
    });
     
    $("#content tbody tr:even").addClass("alt");
  }
);


CSS:
#content tr.alt td {background-color:#C9EAFB;}
#content tr.over td {background-color:#006699 !important; color:#ffffff;}

Железобетонный метод, работающий во всех браузерах. Не забудьте подключить jQuery.

Пример таблицы:

Наименование Описание
1 Кролики Это не только ценный мех
2 Кролики Это 5 кг питательного мяса
3 Так вот, кролики Это 5 кг питательного калорийного мяса


Т.е. отлавливаются все таблицы внутри блока id="content", подсвечиваются строки внутри tbody (чтобы не затрагивать шапку таблицы thead). И так же строки внутри tbody раскрашиваются через одну. Всё просто и кроме jQuery нам ничего не требуется, никаких лишних библиотек.

Су-27, Авиация


перейти в Блог | Блог (стр. 11)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): CSS 3  JavaScript 15  jQuery 8  web-программирование 34  лучшее 9  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)