Линейки в таблицах - Вёрстка - Webmascon

WEBMASCON - журнал для веб-мастеров обновление: 2004.04.12
» Вёрстка

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

The Table Ruler
автор: 2003 © Кристиан Хейлман и A List Apart
перевод: 2004.04.12 Мамяшев Марат

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

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

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

Обсудить (3)

Ссылки по теме

- Эта статья на английском языке | англ.
- Другие статьи с сайта A List Apart | англ.

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

что такое система Орфус?

Рекомендую

Михаил Дубаков
Создание Web-страниц. Искусство верстки
Сравните цены:
на http://www.ozon.ru/context/detail/id/1590005/?partner=webmascon
на http://www.books.ru/shop/books/149089?partner=webmascon
на http://oz.by/books/more.phtml?id=109670&partner=webmascon
Почитайте Главу 7
Почитайте Главу 9

Рекомендую

Михаил Дубаков
Веб-мастеринг средствами CSS
Сравните цены:
на http://www.ozon.ru/context/detail/id/1099692/?partner=webmascon
на http://www.books.ru/shop/books/27425?partner=webmascon
на http://oz.by/books/more.phtml?id=103997&partner=mysite
Почитайте Главу 5
Отзывы о книге

подробнее
Удобный хостинг $6/мес.
- Поддержка PHP/Perl
- 500MB места на диске
- 15GB трафик в месяц
- Тестовые аккаунты
- Статистика
- MySQL база данных
- Панель управления
- SSH/FTP доступ
- 24x7x365 поддержка на русском
- Регистрация доменов
- Бесплатные поддомены.
- 100+ PHP скриптов
http://www.a1-hoster.com/