page 1 of 4
Table Row Rollover
Introduction
Situation: The project has a requirement that the rows in a table on the page change their background and text colors when the cursor is over them.
This is a continuation from the tutorial on Table Cell Rollovers. Instead of affecting a single cell, all of the cells in a single row are highlighted. Again, you can use: JavaScript or Cascading Style Sheets or a combination of both.
Unlike table cells, there are some properties that cannot be changed at the table row level.
- Changes in a row's style will not override styles assigned to the cells in that row. It will only override inherited styles
- You can only change the background and font properties with the row styles
- The appearance of the cellspace (border-space) can only be affected at the table level.
With these restrictions in mind, there may be a preference for techniques that directly affect the cells (TD) in a row (shown later) rather then affects applied through the row (tr) element. Yet, there are many cases where the table cell's inherit background and text attributes that can be change by making an edit at the row (TR) level. Row level highlighting provides an easy entry into the tutorial so that's what will be covered on this page. Also, all changes will be created by changing the elements class name. This is a technique introduced the tutorial on Table Cell Rollovers and simplifies the process. Here is the CSS that will be used for the highlight.
.hlt td {
background-color: yellow;
color: black;
}
By specifying .hlt td the style is not being applied to the row (TR) but the descendant cells (TD), and this selector has higher priority than TD alone. We can circumvent our first restriction this way.
The term Hybrid is being used here to mean JavaScript only changes a class name and style is handled in CSS.
While this page demonstrates hybrid JavaScript-CSS solutions and uses in-line event binding, we are not using a piece of code like this piece used to highlight cells.
function roll(obj, highlightcolor, textcolor){
obj.style.backgroundColor = highlightcolor;
obj.style.color = textcolor;
}
That would change the row's styles and risks not being able to override the cell's styles. The best way is to change the class name. Even in the solutions that separate the behavior from the (X)HTML will use this CSS trick of changing the row's class name to alter the cell's style (or DOM methods will be used to directly affect the cell).
Hybrid Solution 1
The first example uses the same direct in-line process as the first table cell example.
- Tested and Worked on:
- Netscape 7 +, Konqueror 3.x +, Mozilla 1.3.1 & 1.7+
Opera 7.21, Opera 6.0.2, FireFox, IE 5.0, IE 5.5, IE 6.0.28
Should work on all graphical browsers since IE 3 and Netscape 4.
Try it! Run your mouse over the table and see the cell colors change.
| Column1 | Column2 | Column3 |
|---|---|---|
| Data 1.1 | Data 1.2 | Data 1.3 |
| Data 2.1 | Data 2.2 | Data 2.3 |
| Data 3.1 | Data 3.2 | Data 3.3 |
| Data 4.1 | Data 4.2 | Data 4.3 |
Take a look at the HTML
<tr onmouseover="this.className = 'hlt';" onmouseout="this.className = '';">
There's not much to see here. The mouseover event changes the row's (TR) class name to htl; however, the style rule selector is written .htl td which styles the descendent cells and not the row. And the mouseout event sets the class name to an empty string allowing the cell's next higher cascade styles or inherited styles to take affect.
All of the solutions on this page are just different ways of implementing this solution. Understanding it will help understand the rest.
Hybrid Solution 2
| Column1 | Column2 | Column3 |
|---|---|---|
| Data 1.1 | Data 1.2 | Data 1.3 |
| Data 2.1 | Data 2.2 | Data 3.3 |
| Data 3.1 | Data 3.2 | Data 3.3 |
| Data 4.1 | Data 4.2 | Data 4.3 |
Okay nothing really new, but let's take a look at the code.
<script type="text/javascript">
function mouse_event(obj, newClass) {
obj.className = newClass;
}
</script>
This is a simple script that assigns a class name to the row passed as the pronoun this to the formal argument obj. This function is declared in the <head> section. It accepts two argument: the row and the new class.
Now here the relevant part of the HTML:
<tr onmouseover="mouse_event(this, 'hlt');" onmouseout="mouse_event(this, '');">
In each <tr> tag the onMouseOver and onMouseOut events are assigned our mouse_event function as the event handler with this and a class as arguments. It achieves the results of the first technique in the same way: changing the row's class.
The function is generic enough to be highly reusable across a variety of HTML elements. And, it is very portable working on a wide variety of browsers without modification.
The new styles and methods would have the event handler bound to the events using different techniques. This is the topic of the next page.
