Пишем полосатые таблицы, раз ... и навсегда
© Гаенко Дмитрий, 2004
E-mail: gds@ukr.net
Наверно много статей написано на эту тему и открыть Америку будет сложно, но ...
Для начала - о чем речь ? А речь идет о таблицах с чередующимися разноцветными строками
(для улучшения восприятия данных) типа:
| Наименование |
Кол-во |
| Яблоки |
10 кг |
| Бананы |
10 кг |
| Апельсины |
10 кг |
| Финики |
10 кг |
Рассказывать о том как это делается классическими способами не буду - уж больно скучно, а вот одной
идеей поделюсь. Чтобы каждый раз не писать "генерилок" этих самых таблиц (не важно каких - серверно-
или браузероориентированных) да и вообще избавить ваш HTML-код (или скрипт-код) от лишнего "мусора"
я написал небольшую библиотеку.
Каждой таблице требующей "разукрашивания" присваиваем определенное
имя класса. На onLoad BODY вешаем обработчик, который выбирает все таблицы страницы и те у которых
прописан нужный класс "разукрашивает". Таким образом, для разукрашивания таблиц в дальнейшем вам
потребуется всего лишь добавить в HTML-код пару строк и прописать у нужных таблиц определенное имя
класса и ... все! HTML остается практически нетронутым, если у вас был серверный механизм для
генерения - плюс разгружаем сервер - разукрашивание переносим на сторону клиента.
Ниже приведены исходные тексты необходимых файлов полный архив которых можно скачать тут - скачать.
Другие статьи...
Файл decorer.js
<![CDATA[
// targetClass - класс таблиц подлежащих разукрашиванию
// hlClass - класс подсвеченой строки
// normalClass - класс нормальной строки
function decoreTables(targetClass,hlClass,normalClass)
{
var flag = true;
var tables = document.getElementsByTagName("TABLE");
for (var i=0; i<tables.length; i++)
if (tables[i].className==targetClass)
{
var trs = tables[i].getElementsByTagName("TR");
for (var j=0; j<trs.length; j++)
trs[j].className = (flag=!flag)?hlClass:normalClass;
}
}
]]>
Файл demo.html
<![CDATA[
<HTML>
<HEAD>
<SCRIPT language="JScript" src="decorer.js"></SCRIPT>
<LINK REL="Stylesheet" TYPE="text/css" HREF="decorer.css">
</HEAD>
<BODY onLoad="decoreTables('colored','light','')">
<TABLE class="colored" cellspacing="0" cellpadding="0" width="100%">
<CAPTION>Table 1</CAPTION>
<TR>
<TH>Наименование</TH>
<TH class="selected">Количество</TH>
<TH>Сумма</TH>
</TR>
<TR>
<TD>Пиво</TD>
<TD>10 л</TD>
<TD>100 грн.</TD>
</TR>
<TR>
<TD>Водка</TD>
<TD>50 л</TD>
<TD>200 грн.</TD>
</TR>
<TR>
<TD>Папиросы</TD>
<TD>250 шт.</TD>
<TD>70 грн.</TD>
</TR>
<TR>
<TH colspan="2">Итого</TH>
<TH>не меряно</TH>
</TR>
</TABLE>
<TABLE cellspacing="0" cellpadding="0" width="100%" border>
<CAPTION>Table 2</CAPTION>
<TR>
<TH>1</TH>
<TH>2</TH>
<TH>3</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
</TABLE>
<TABLE class="colored" cellspacing="0" cellpadding="0" width="100%">
<CAPTION>Table 3</CAPTION>
<TR>
<TH>1</TH>
<TH>2</TH>
<TH>3</TH>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TH>Итого</TH>
<TH>-</TH>
<TH>не меряно</TH>
</TR>
</TABLE>
</BODY>
</HTML>
]]>
Файл decorer.css
<![CDATA[
.colored {
background-color: #EFEFEF;
font-family: arial;
font-size: 12px;
text-align: center;
border-right: 1px solid black;
}
.colored CAPTION {
color: blue;
font-weight: bold;
}
.colored TR {
height: 17px;
}
.colored TD {
border-left: 1px solid black;
}
.colored TH {
background-color: #696969;
color: yellow;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.light {
background-color: #B0C4DE;
color: #008B8B;
}
.colored TH.selected {
color: red;
}
]]>