Таблица с чередующимися цветными строками
Если Вы хотите улучшить восприятие и информативность таблиц на своем сайте, то рекомендуем Вам воспользоваться нашим скриптом, написанным на JavaScript.
Данный JavaScript код позволяет из обычной таблицы получить таблицу с чередующимися цветными строками. Конечно, проще было бы сделать то же самое при помощи CSS, но мы специально сделали чередующие цветные строки при помощи JavaScript кода. В дальнейшем, при необходимости, вебмастер сам может доработать данный скрипт для включения или отключения данного эффекта по нажатию какой-нибудь кнопки или использовать данный код в каких-нибудь других целях.
Наглядный пример таблицы с чередующимися цветными строками Вы можете наблюдать ниже:
| Столбец | Описание | Текст |
| Столбец | Описание | Текст |
| Столбец | Описание | Текст |
| Столбец | Описание | Текст |
| Столбец | Описание | Текст |
| Столбец | Описание | Текст |
Для получения на своем сайте, таблицы с цветными строками как в примере выше, добавьте на свой сайт следующий JavaScript код:
<script type="text/javascript">
function Rows_colour(name_tab) {
rows = document.getElementById(name_tab).getElementsByTagName("TR");
for(var Count_row = 0; Count_row<rows.length; Count_row++) {
if ((Count_row + 1) % 2 == 0) {
rows[Count_row].style.backgroundColor = "Limegreen";
rows[Count_row].style.color = "Darkred";
}
else {
rows[Count_row].style.backgroundColor = "Yellow";
rows[Count_row].style.color = "Blue";
}
}
}
</script>Таблицу, строки которой будем делать цветными, следует описывать следующим образом:
<TABLE id="color_tab">
<TR><TD>Столбец</TD><TD>Описание</TD><TD>Текст</TD></TR>
<TR><TD>Столбец</TD><TD>Описание</TD><TD>Текст</TD></TR>
<TR><TD>Столбец</TD><TD>Описание</TD><TD>Текст</TD></TR>
<TR><TD>Столбец</TD><TD>Описание</TD><TD>Текст</TD></TR>
</TABLE>При этом не забываем добавить стиль для ячеек таблицы:
<style type="text/css">
#color_tab { margin: 0 auto; }
#color_tab td { width: 99px; text-align: center; }
</style>Ну и после того, как таблица и JavaScript код добавлены на страничку, где-нибудь в конце странички необходимо активировать наш JavaScript код для получения таблицы с чередующимися цветными строками путем вызова функции Rows_colour("color_tab"), где color_tab - id таблицы. Делается это следующим образом:
<script type="text/javascript">
Rows_colour("color_tab");
</script>Если Вы все сделали правильно, то в результате на своем сайте Вы сможете получить точно такую же таблицу с чередующимися цветными строками, как и в нашем примере.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.