Решение
Чтобы таблицу было легче воспринимать, можно изменять цвет строки при наведении на нее указателя мыши – это выделит содержимое. Такой эффект показан на рис. 5.10.

Рис. 5.10. Выделение строки при наведении на нее указателя мыши

Реализовать его достаточно просто, для этого достаточно добавить в таблицу стилей следующее правило:

.datatable tr:hover {
background-color: #DFE7F2;
color: #000000;
}

Готово!

Обсуждение
Такой документ будет корректно отображаться во всех современных браузерах, в том числе и Internet Explorer 7, но за исключением Internet Explorer 6. Однако если данные в таблице представлены логично и все
понятно и без фонового выделения, то такой эффект можно считать приятным дополнением, но не обязательным – без которого нельзя было бы пользоваться сайтом.

Если по каким-либо причинам вам непременно нужно реализовать данную функцию для пользователей Internet Explorer 6, можно добавить простой сценарий на JavaScript. Для изменения фонового цвета ряда таблицы при наведении на него указателя мыши в Internet Explorer 6 нужно задать необходимые свойства для CSS-класса (в этом примере я назову его hilite).

.datatable tr:hover, .datatable tr.hilite {
background-color: #DFE7F2;
color: #000000;
}

После таблицы добавьте на страницу следующий код на JavaScript:

<script type=”text/javascript”>
   var rows = document.getElementsByTagName(‘tr’);
   for (var i = 0; i < rows.length; i++) {
      rows[i].onmouseover = function() {
         this.className += ‘ hilite’;
      }
      rows[i].onmouseout = function() {
         this.className = this.className.replace(‘hilite’, ‘’);
      }
   }
</script>

В данном сценарии осуществляется поиск всех тегов <tr> в документе и присвоение каждому из них обработчика событий mouseover и mouseout.
Они присваивают рядам CSS-класс hilite при наведении на него указателя мыши и удаляют его при его смещении в другую область. Как видно на рис. 5.11, такое сочетание CSS и JavaScript приводит к желаемому результату.

Рассматриваемый сценарий на JavaScript динамически задает CSS-класс для тега. В данном случае мы добавляем класс hilite в тег <tr> по событию mouseover, для чего используется свойство onmouseover:

      rows[i].onmouseover = function() {
         this.className += ‘ hilite’;
      }

Рис. 5.11. Выделение ряда в Internet Explorer 6 с помощью JavaScript

После наступления события mouseout мы удаляем класс:

      rows[i].onmouseout = function() {
         this.className = this.className.replace(‘hilite’, ‘’);
      }

Изменяя имя класса элементов в ответ на действия пользователя с помощью JavaScript, можно добиться разнообразных привлекательных и ненавязчивых эффектов. Этот прием можно применить, например, для выделения определенной области путем изменения имени класса соответствующего элемента div по событию mouseover.