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

Сайт от А до Б

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

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

Линейка, которая не позволит нам сбиться.

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

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

Разметка

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

Обратите внимание на пример таблицы:

    [... еще ряды ....]


My Records

  

    
Artist
    
Title
  


  

    
Ladytron
    
604
  

  

    
Last updated: 17.03.2004
  

И, собственно, сам скрипт:

function tableruler()
{
 if (document.getElementById &&» 
  document.createTextNode)
  {
   var tables=document.getElementsByTagName»
    ('table');
   for (var i=0;i
Для начала проверяем, поддерживает ли браузер объектную модель документа. Затем выбираем все таблицы в документе и обрабатываем их.
Проверяем, является ли именем класса таблицы слово "ruler". Если нет, то таблица пропускается, а мы передвигаемся к следующей. Если же да, то подвергаем ее обработке.
Проверяем, является ли часть таблицы TBODY (а не TFOOT или THEAD) . Если да, то применяем к ней фунцию OnMouseover, которая изменит имя класса ряда на "ruled".
При OnMouseout имя класса очищается
Стилизация линеек
Дабы придать другой внешний вид линейке, вам необходимо всего лишь определить ее стиль.
tr.ruled{
	background:#9cf;
} 

Эти параметры будут применены к каждому подсвеченному ряду внутри каждой таблицы класса "ruler".
Если же вы хотите определить различные линейки для различных документов, просто присвойте таблице ID.
и в CSS напишите:
#mytable tr.ruled{
	background:#333;
	color:#ccc;
}
На этом все. Да будет ваша линия прямой и непреклонной.

Чтобы обсудить это в форуме, нажмите здесь.




 Добавить в закладки:  
 

    
google.com
  
yandex.ru
  
bobrdobr.ru
  
memori.ru
  
moemesto.ru
  
linkstore.ru
rumarkz.ru
  
100zakladok.ru
  
del.icio.us
  
technorati.com
 
 
 
Хостинг-источник: http://karman.com.ua, http://webmascon.com/topics/coding/40a.asp
  Я запускаю MySQL на машине Win32. Каждый раз, когда я создаю новую таблицу имена таблицы и полей преобразуются в нижний регистр!
  Запущена MySQL <= 4.0.1 с директивой lower_case_table_names установленной в 1. Если я создаю новую таблицу с заглавной буквой в её названии, она заменяется на строчную.