Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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>

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

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

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