Есть один очень простой способ используя
jQuery, подсвечивать разным цветом через одну, строки <tr> в таблицах <table>, а так же выделять их при наведении курсора, на подобии PHPMyAdmin. Пример выполнен на jquery. Заранее извините за стиль (это мой первый пост тут).
Что бы не мучать вступлениям приведу сразу весь код, копируйте, смотрите и используйте! Выдернул код прямо из своего приложения.
CSS
.listtable {
background: #fff;
border: 1px solid #000;
border-left: 3px double #000;
border-right: 3px double #000;
}
.listtable td, th {
padding: 6px 6px;
background: #D9DFED;
border-bottom: 1px solid #95bce2;
vertical-align: top;
}
.listtable th {
background: #CCD1D4;
}
.listtable td * {
padding: 6px 11px;
}
.listtable tr.alt td {
background: #DEE3E4;
}
.listtable tr.over td {
background: #D5D6DA;
}
JavaScript
<script src="/js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$(".listtable tr").mouseover(function() {
$(this).addClass("over");
});
$(".listtable tr").mouseout(function() {
$(this).removeClass("over");
});
$(".listtable tr:even").addClass("alt");
}
);
</script>
И остается только html таблице задать класс listtable. Надеюсь вам пригодится этот пример. Всего доброго!
Комментарии
Спасибо, то, что нужно!
Есть очень хороший плагин на jquery для таблиц - datatables.net
А вот задачка - есть табличка, напр, и по принципу статьи пишем:
<Табле class='listtable'> <Тр>
<ТД >1 <ТД >2
<Тр>
Цикл (++) {
<ТД >1++ < /ТД>
<ТД >2++< /ТД>
<Тр>
}
Как сделать , чтобы только то, что в цикле Подсвечивалось, а не самая верхушка таблицы???
Тобишь, <ТД >1 <ТД >2 - не подсвечиавалось?
Спасибо...
На сколько я понял задачу, то нужно просто:
Я не проверял этот код. Но уверен что делается таким способом.
Ой, спасибо большое - как раз то, что нужно ))))
А про thead - я вообще что-то забыл ))) позор мне, кароче...
Кстати, с данным вариантом, из статьи - немного не срабатывает - наверное цвет не тот подобран - ну, вы же да, не проверяли )))
А у меня - немого , как всегда, переделываю под свои потребности, под свои уже существующие стили, нечто пришлось убирать, конечно, подкоректировать вызов джиквери функции - а так в основном, все как раз класно...
Кстати, это единственный качетсвеннй вариант из всех, что я находил в Рунете.. было еще где-то максимум два способа Подсветки строк - но там суто на яваскрипте, тоесть без примененния библиотеки джиквери - но сложно и читать и разобратся, подключать еще дополнительные скрипты - а у вас все просто....
Спасибо большое и огромное....
Рад был помочь. Хотя был не уверен, что вернетесь за ответом.
Спасибо. Четко и грамотно написано. Copy-paste - работает, только css подправил под свой дизайн. Профессионально :)
$(".listtable tr").mouseover(function() {
$(this).toggleClass("over");
});
и не парте себе голову! + выделение по клику
$(".listtable tr").click(function () {
$(this).toggleClass("click");
});
Классное решение.
А что за библиотека jQuery? Без нее совсем не будет работать? Где ее взять и как подключить? И вообще для чего она (в двух словах)? А phpMyAdmin'е тоже с применением jQuery сделано?
Спасибо.
Возможность есть, но там по-другому JS нужно сделать, так как для дива нет селектора :even (чётный). Хотя сейчас проверить не могу может и для дива есть такой селектор. А так нужно просто каждому второму диву присвоить класс .even например и CSS подправить :)
Зачёт, чувак!
А есть-ли возможность такой подсветки для div а не для таблиц?
Ответил для Алекс, но не там разместился комментарий.
Хочу,чтобы моя фамилия,имя и отчество Кежватов Николай Васильевич подсвечивались всегда,и создать ярлык на экране монитора.