Mootools → Раскрашиваем таблицу «зеброй»
Полосатые таблицы — также известные как «конфетные» или «зебровые» таблицы, а также как полутень — это применение слабого оттенка к чередующимся строкам или рядам в таблицах данных или формах.
Техника полосатых таблиц особо эффективна для больших таблиц с данными, это помогает быстрее находить нужную информацию и меньше напрягает глаза. Теперь разберём как сделать это с помощью mootools.
Этап I
Загружаем библиотеку с официального сайта, подключаем её на страницу.<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
Этап II
Затем, ниже создаём событие которое выполниться сразу после того как загрузиться страница.<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
});
</script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
});
</script>
Этап III
Теперь нужно выбрать все таблицы в массив, которые имеются на странице и обойти их.<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
document.getElements('table').each(function(table) {
});
});
</script>
В данном коде в переменную table будут по очереди передаваться все найденные таблицы.<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
document.getElements('table').each(function(table) {
});
});
</script>
Этап IV
Имея таблицу мы можем пройтись по всем строкам таблицы и применить к ним разные классы.<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
document.getElements('table').each(function(table) {
var i = 0;
table.getElements('tr').each(function(tr) {
i++;
if (tr.getElement('th') == null) {
tr.addClass((i%2)==0 ? "odd" : "even");
}
});
});
});
</script>
Немного пояснений, считываем все строки в массив из каждой таблицы, затем обходим этот массив. Используя счётчик i мы сможем определить какая строка чётная а какая нечётная, и исходя из этого присвоить строкам разные классы, а к заголовкам таблицы эти действия не распространяются.<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
document.getElements('table').each(function(table) {
var i = 0;
table.getElements('tr').each(function(tr) {
i++;
if (tr.getElement('th') == null) {
tr.addClass((i%2)==0 ? "odd" : "even");
}
});
});
});
</script>
Этап V
Добавим немного CSS.<style>
table tr.even {
background-color:#EEEEEE;
}
table tr.odd {
background-color:#FFFFFF;
}</style>
table tr.even {
background-color:#EEEEEE;
}
table tr.odd {
background-color:#FFFFFF;
}</style>
Теперь у нас все таблички полосатые, раскрасить вы их сможете как захотите.
Примечание
Если нужно сделать полосатыми таблицы только с определённым классом, то нужно в строке #4 сделать небольшие изменения.document.getElements('table[class=table]').each(function(table) {
В данном случае обработаны будут только те таблицы у которых class=«table».
UPD:
После подсказки Alexander, можно упростить скрипт:
<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
$$('tr:even').addClass("even");
$$('tr:odd').addClass("odd");
});
</script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
$$('tr:even').addClass("even");
$$('tr:odd').addClass("odd");
});
</script>
Но если вам нужно исключить загаловки таблиц то нужно немного дополнить код:
<script language="JavaScript" type="text/javascript" src="путь_до_файла/mootools-1.2.1-core-yc.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
$$('tr:even').each(function(tr) {
if (tr.getElement('th') == null) {
tr.addClass("even");
}
});
$$('tr:odd').each(function(tr) {
if (tr.getElement('th') == null) {
tr.addClass("odd");
}
});
});
</script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function() {
$$('tr:even').each(function(tr) {
if (tr.getElement('th') == null) {
tr.addClass("even");
}
});
$$('tr:odd').each(function(tr) {
if (tr.getElement('th') == null) {
tr.addClass("odd");
}
});
});
</script>
Метки: css, разработка, JavaScript
Комментарии:
Четные/нечетные элементы можно выбирать, используя псевдоселекторы $$('tr:even') / $$('tr:odd');
mootools.net/docs/Utilities/Selectors#Selector:even
PS Разреши русские буквы в логине: )
Ответить
Ответить
Исправлю.
Ответить
$('table.table tr:even').addClass('even');
$('table.table tr:odd').addClass('odd');
Гораздо короче и понятнее.
Ответить
вобщето на jQuery будет вот так:
$(«tr:nth-child(odd)»).addClass(«odd»);
Ответить
Ответить
Ответить
$(«tr:nth-child(odd)»).addClass(«odd»);
Ответить
Вот это для IE, потому как IE не пониамние фон у tr
Ответить
Ответить
Ответить
Ответить