Выделение строки таблицы и соединение
Значения ItemType выводятся в таблице, чтобы воспользоваться средствами таблицы стилей, которые предоставляют интересный метод присвоения ссылок ячейкам таблицы, а не самим значениям. Значения ItemType появляются в таблице в следующем виде и выделяются, когда указатель мыши перемещается по записям (вокруг таблицы показана граница, чтобы эффект был более заметен):
Ссылки делаются из ячеек таблицы – на самом деле из строк таблицы – а не из текстовых строк, появляющихся внутри ячеек. Это позволяет присвоить выделение и визуальные индикаторы строкам, когда указатель мыши перемещается по ним, а ссылки активируются при щелчке на строках таблицы, содержащих данные, а не на самих данных. Такой метод соединения из строк таблицы более четко иллюстрируется списком продуктов, появляющимся на странице search.php. Такая же техника используется здесь, хотя эффект не такой впечатляющий, как выделение и соединение из нескольких ячеек в строке.
Эти действия по выделению и соединению создаются следующим кодом для строк таблицы. Особенно отметим, что код находится внутри тега <tr>, так что результат проявляется во всех ячейках строки (хотя в данном конкретном случае в строке имеется только одна ячейка).
<tr style="color:seagreen; line-height:8pt; font-size:9pt" onMouseOver="this.style.backgroundColor='lightgreen';this.style.color='darkgreen'; this.style.cursor='hand'" onMouseOut="this.style.backgroundColor='white';this.style.color='seagreen'" onClick="location.href='search.php?Category=$row[ItemType]'" > <td>$row[ItemType]</td> </tr>
Свойства таблицы стилей используются для создания начального вида строк в ячейках. Свойство color задает цвет текста, выводимого в ячейках, свойство line-height задает высоту текста (и соответственно высоту самой ячейки), а свойство font-size задает размер шрифта текста.
Кроме этих статических свойств необходимо добавить свойства, которые изменяются, когда посетитель взаимодействует с ячейками. Мы хотим, чтобы "что-то происходило", когда посетитель перемещает курсор над ячейками, смещается с ячеек и щелкает в ячейке. Описанные события являются фактически событиями сценариев, которые в языке JavaScript называются onMouseOver, onMouseOut и onClick. Поэтому эти события можно использовать для включения изменений в стилях оформления ячеек таблицы.
