This article starts with a line in a simple css highlighted table and discusses the compatibility of the highlighted function in different browsers. Describes how to bind javascript events to a table to implement this function. This article is one of the development study notes.
[Text]
In web development, you often encounter situations where you need to highlight the rows pointed to by the mouse. First, let's talk about the general situation.
· A simple Attempt
CSS 2 allows us to use hover pseudo classes for HTML elements, which greatly facilitates the control of Table Styles.
Let's start with a small example:
XHTML (only the table section is listed. Complete the page by yourself. In this example, the table section is passed under the Transational DTD ):
The Code is as follows:
| Item |
Value |
| Project Item1 |
Value: Value1 |
| Project Item2 |
Value: Value2 |
| Project Item3 |
Value: Value3 |
| Project Item4 |
Value: Value4 |
| Project Item5 |
Value: Value5 |
| Project Item6 |
Value: Value6 |
Then, CSS is used to define the table style:
The Code is as follows:
. Datatable {
Margin: 15px auto;
Width: 500px;/* The two rows can be modified as needed, for example only */
}
. Datatable,. datatable tr,. datatable td,. datatable th,. datatable. tableheader td {
Border: 1px # 0073ac solid;
Border-collapse: collapse;
Padding: 3px;
}
. Datatable. tableheader td,. datatable th {
Font-weight: bold;
Background: # fff url (images/thead.png) repeat-x;
Padding: 8px 5px;
}
. Datatable tr: hover {
Background-color: # cfe9f7;
}
Do not explain the css part too much. Note that the last bold part applies the pseudo hover style to the tr element. This works perfectly in browsers supported by CSS2 (IE7 +, FF, Opera, Safari, etc. However, CSS1 only supports pseudo classes of the anchor Element a. Unfortunately, IE6 only supports pseudo classes of css1. So we need to modify it to provide support for IE6.
First, add a style:
The Code is as follows:
. Datatable. trHover,. datatable tr: hover {
Background-color: # cfe9f7;
}
A trHover class is added here to correct the display in IE6. The next step is to write javascript. The original idea was very simple. Didn't you want to highlight the current line when you point to it? Therefore, you can apply javascipt to each row. First, write a javascript function. In order to unify the highlighted and unhighlighted functions, we can merge them into a function, which simplifies function calling and binds a function to the mouseover and mouseout events of tr.
The Code is as follows:
Function highlightTr (o ){
Var regStr =/\ B \ s * trHover \ B/g;/* Regular Expression filtering trHover class */
If (o. className. indexOf ('trhover ') =-1)
O. className + = "trHover ";
Else
O. className = o. className. replace (regStr ,"");
}
Here is a tips: replace regular expressions. Because your tr element may have other styles (classes), such as evenRow and oddRow in this example, you cannot simply leave the object className empty when unhighlighting. Then, as you may imagine, bind events to tr:
The Code is as follows:
Project Item1
Value: Value1
You can bind events to all tr instances. However, this problem also exists: 1. The page code volume is increased. 2. If the table is output by a background server program, you are sometimes not allowed to bind javascript Functions to the tr element. What should I do? Directly, you can use js to search for the style table in a certain range on the page, and then bind the tr event. However, let's change our mindset today to bind a js event to the table element to highlight a row!
This idea is justified. We have to talk about the browser event model. For historical reasons, various browsers have different responses to javascript events, but the basic idea is the same. Js events are described in W3C DOM as the capture-bubble model. Simply put, it is a bit like dumplings. Dumplings gradually sink to the bottom of the pot, accept Hot Transfer, and slowly drift to the top. Back to the model itself, there are two types of javascript events. First, capture the event from the outermost element and gradually transfer it to the element that triggers the event. This is called event capture, then gradually expand to the outer element-this is called event bubbles. The implementation of IE does not support capturing types of events. The implementation of bubble events is slightly different from the W3C DOM standard, but the general idea is the same.
For a long time, we wanted to use the event's bubble processor to highlight table rows.
I reiterate that a bubble event spreads from the innermost element that triggers a javascript event to the outer layer, just like a ripple stirred up by a stone. Move the mouse over a row. First, the innermost element, such as text in td or other elements, triggers mouseover. Then, the elements are uploaded to td --> tr --> tbody --> table to respond to the mouseover event in sequence, this bubble process also exists when the mouse is removed. This is the basis for processing the Event Response Program.
First, we need to modify the event binding code in XHMTL. Remove the mouseover and mouseout event processing in the tr element, and then add the event processing to the table. The final table is as follows:
The Code is as follows:
| Item |
Value |
| Project Item1 |
Value: Value1 |
| Project Item2 |
Value: Value2 |
| Project Item3 |
Value: Value3 |
| Project Item4 |
Value: Value4 |
| Project Item5 |
Value: Value5 |
| Project Item6 |
Value: Value6 |
Compared with the table we first wrote, js event binding with only the table element is added. The next step is to perform a major operation on our hightlightTr function! Paste the final code and analyze it together:
The Code is as follows:
