Поиск:

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

До появления цифровых документов и 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;
}

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

Кристиан Хейлман

Обсудить (комментариев: 14)

« назад к списку статей

Рекомендую

Михаил Дубаков Создание Web-страниц. Искусство верстки Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 7 Почитайте Главу 9

Рекомендую

Михаил Дубаков Веб-мастеринг средствами CSS Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 5 Отзывы о книге