Реальный пиарСоздание сайтовВёрстка → Линейки в таблицах

Линейки в таблицах

До появления цифровых документов и OCR-сканирования ввод информации был достаточно скучным процессом, предполагавшим рутинный набор огромных текстов вручную. Вам давали гору распечаток и требовали набрать их на компьютере строчка за строчкой. Если же вы уставали или хоть на секунду отвлекались, то найти место, где вы прервали работу, было очень непросто.

Приходилось проявлять чудеса изобретательности. В ход шла металлическая линейка, которую, чтобы не сбиться, прикладывали к распечатке и педвигали ниже, когда допечатывали строчку.
Линейка, которая не позволит нам сбиться.

При помощи небольшого JavaScript'а мы сможем снабдить наших посетителей точно таким же инструментом для HTML-документов, содержащих таблицы с большим объемом информации, используя эффект rollover на табличных рядах. Конечно же, это можно сделать вручную, но это будет не рационально. Вместо этого мы используем DOM, чтобы найти ряд, который должен быть подсвечен при наведении на него курсора.

Для начала, посмотрите на этот пример.
Разметка

Во избежание подсветки всех таблиц в документе, нам следует определить, в каких таблицах он будет использоваться, а в каких нет. Мы сделаем это, пометив нужные нам таблицы классом "ruler". Следующей вещью, которой нам стоит избежать, является подсветка "шапок" таблиц и их "подвалов".

Обратите внимание на пример таблицы:
<table class="ruler" summary="Table of
my records">
<caption>My Records</caption>
<thead>
<tr>
<th scope="col">Artist</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ladytron</td>
<td>604</td>
</tr>
[... еще ряды ....]

</tbody>
<tfoot>
<tr>
<td colspan="2">Last updated: 17.03.2004</td>
</tr>
</tfoot>
</table>

И, собственно, сам скрипт:
function tableruler()
{
if (document.getElementById &&»
document.createTextNode)
{
var tables=document.getElementsByTagName»
('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className=='ruler')
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
if(trs[j].parentNode.nodeName=='TBODY'»
&& trs[j].parentNode.nodeName!='TFOOT')
{
trs[j].onmouseover=function(){this.»
className='ruled';return false}
trs[j].onmouseout=function(){this.»
className='';return false}
}
}
}
}
}
}

Для начала проверяем, поддерживает ли браузер объектную модель документа. Затем выбираем все таблицы в документе и обрабатываем их.

Проверяем, является ли именем класса таблицы слово "ruler". Если нет, то таблица пропускается, а мы передвигаемся к следующей. Если же да, то подвергаем ее обработке.

Проверяем, является ли часть таблицы TBODY (а не TFOOT или THEAD) . Если да, то применяем к ней фунцию OnMouseover, которая изменит имя класса ряда на "ruled".

При OnMouseout имя класса очищается
Стилизация линеек

Дабы придать другой внешний вид линейке, вам необходимо всего лишь определить ее стиль.
tr.ruled{
background:#9cf;
}

Эти параметры будут применены к каждому подсвеченному ряду внутри каждой таблицы класса "ruler".

Если же вы хотите определить различные линейки для различных документов, просто присвойте таблице ID.

<table class="ruler" id="mytable" summary="Table of my records">

и в CSS напишите:
#mytable tr.ruled{
background:#333;
color:#ccc;
}

На этом все. Да будет ваша линия прямой и непреклонной.


Источник: http://webmascon.com

Рекомендуем



Памятка по CSS Если валидатор вдруг пишет вам, что ваш код не соответствует спецификации, скорей всего это из-за того, что в нем присутствует такое специфические расширение, и оно не будет работать в других браузерах


CSS Design: Укрощение списков Если вы работает с броузером Opera или с семейством броузеров Gecko, нижеприведенный CSS создаст такой же список, что и предыдущий, при этом в сам список ничего дополнительно добавлять не нужно


Выпадающие меню с помощью CSS Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer