Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Таблица зебра

Когда-то я встречался со скриптом который автоматически чередует цвет строк таблицы (горизонтальная зебра) и вот недавно он мне опять понадобился. Не так долго пришлось его устанавливать как искать, и поэтому решил написать об этом в своем блоге. Если вы тоже ищите такой скрипт то вы попали именно туда, куда вам нужно. Начнем:

чередующиеся строки

 

1. Ну как всегда нужно подключить библиотеку jquery для того чтобы наш скрипт работал (вероятно что у вас уже подключена библиотека, тогда пропускайте этот шаг). Лучше всего подключать его с Googla. Делается это просто, нужно просто прописать в код вашей странички, между тегами <HEAD></HEAD> следующее:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»></script>

1.8.3 — это версия библиотеки (не обязательно именно эту).

2. Обязательно нужно дописать в <BODY> следующее onload=»colourRows() ; colourCells() ; colourCols()», тоесть в результате мы должны получить:

<body onload=»colourRows() ; colourCells() ; colourCols()»>

3. Теперь нужно вставить скрипт, который и делает череду цветов. (также подключаем его между тегами <HEAD></HEAD> )

<script type=»text/javascript»>
function colourRows(){
rowEl=document.getElementById(«tab»).getElementsByTagName(«tr»)
for(var rowCount=0; rowCount<rowEl.length; rowCount++){
if((rowCount+1) % 2 == 0) {
rowEl[rowCount].style.backgroundColor=»#f2f2f2″
rowEl[rowCount].style.color=»black»
}
else{
rowEl[rowCount].style.backgroundColor=»white»
rowEl[rowCount].style.color=»black»
}}}
</script>

Приметка:

rowEl[rowCount].style.backgroundColor=»#f2f2f2» — это цвет самой строки

rowEl[rowCount].style.color=»black» — это цвет текста в строке.

 

4. Теперь в нужном вам месте вставьте код самой таблицы:

<TABLE id=»tab» border=»1″ cellspacing=»0″ width=»100%»>
<TR align=»center»>
<TD>№</TD>
<TD>Наименование</TD>
<TD>Вид</TD>
<TD>Вес 1 м2/м.</TD>
<TD>Цена<br />до 50 м.</TD>
<TD>Цена (-5%)<br />до 51 — 150 м</TD>
<TD>Цена (-10%)<br />до 151 — 300 м</TD>
<TD>Цена (-15%)<br />до 301 — 450 м</TD>
</TR>
<TR align=»center»>
<TD>1</TD>
<TD>Старый город</TD>
<TD>плоскость</TD>
<TD>100</TD>
<TD>200-00</TD>
<TD>300-00</TD>
<TD>400-00</TD>
<TD>500-00</TD>
</TR>
<TR align=»center»>
<TD>1</TD>
<TD>Старый город</TD>
<TD>плоскость</TD>
<TD>100</TD>
<TD>200-00</TD>
<TD>300-00</TD>
<TD>400-00</TD>
<TD>500-00</TD>
</TR>
<TR align=»center»>
<TD>1</TD>
<TD>Старый город</TD>
<TD>плоскость</TD>
<TD>100</TD>
<TD>200-00</TD>
<TD>300-00</TD>
<TD>400-00</TD>
<TD>500-00</TD>
</TR>
<TR align=»center»>
<TD>1</TD>
<TD>Старый город</TD>
<TD>плоскость</TD>
<TD>100</TD>
<TD>200-00</TD>
<TD>300-00</TD>
<TD>400-00</TD>
<TD>500-00</TD>
</TR>
</TABLE>

ДЕМО можете посмотреть ТУТ—>

Вот и все) пользуйтесь.

Если у вас возникли вопросы задавайте их в комментариях.

3 thoughts on “Таблица зебра”

  1. DmitryAVET:

    Не совсем полная инструкция, несколько дополню.

    Вставлять таблицу не нужно, нужно присвоить ей идентификатор. В данном случае в скрипте указан document.getElementById(«tab»), т.е. id=tab, этот id и нужно прописать в table, его можно заменить на любой другой. Для лучшей структурируемости, js-код лучше вынести в отдельный файл.

  2. admin:

    Да действительно была не полная, но уже все исправлено)

  3. Genius:

    Спасибо автору, долго искал именно этот скрипт!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X