Highlight web page table rows

Highlight web page table rows

[Keywords]: javascript. CSS. Web standard. browser compatibility. Dom. Bubble event. Highlight table rows

[Abstract]: This article starts from a line in a simple CSS highlighted table and explores 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 ):
<Table class = "datatable" cellspacing = "0">
<Thead>
<Tr>
<TH> item </Th>
<TH> value </Th>
</Tr>
</Thead>
<Tbody>
<Tr class = "oddrow">
<TD> Project Item1 </TD>
<TD> value: value1 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item2 </TD>
<TD> value: value2 </TD>
</Tr>
<Tr class = "oddrow">
<TD> Project item3 </TD>
<TD> value: value3 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item4 </TD>
<TD> value: value4 </TD>
</Tr>
<Tr class = "oddrow">
<TD> Project item5 </TD>
<TD> value: value5 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item6 </TD>
<TD> value: value6 </TD>
</Tr>
</Tbody>
</Table>

Then, CSS is used to define the table style:

. 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:

. 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.

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:
<Tr class = "oddrow" onmouseover = "highlighttr ();" onmouseout = "hightlighttr ();">
<TD> Project Item1 </TD>
<TD> value: value1 </TD>
</Tr>

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:

<Table class = "datatable" cellspacing = "0" onmouseover = "highlighttr ();" onmouseout = "highlighttr ();">
<Thead>
<Tr>
<TH> item </Th>
<TH> value </Th>
</Tr>
</Thead>
<Tbody>
<Tr class = "oddrow">
<TD> Project Item1 </TD>
<TD> value: value1 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item2 </TD>
<TD> value: value2 </TD>
</Tr>
<Tr class = "oddrow">
<TD> Project item3 </TD>
<TD> value: value3 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item4 </TD>
<TD> value: value4 </TD>
</Tr>
<Tr class = "oddrow">
<TD> Project item5 </TD>
<TD> value: value5 </TD>
</Tr>
<Tr class = "evenrow">
<TD> Project item6 </TD>
<TD> value: value6 </TD>
</Tr>
</Tbody>
</Table>
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:
<SCRIPT type = "text/JavaScript">
// <! -[CDATA [
// This function fixes the bug where IE6 cannot identify the tr element hover pseudo class.
Function highlighttr (){
VaR theevent = Window. Event | arguments. callee. Caller. Arguments [0];
VaR srcelement = theevent. srcelement;
If (! Srcelement)
{
Srcelement = theevent.tar get;
}
If (! Srcelement. parentnode) return false;
VaR o = srcelement. parentnode;
While (O. parentnode & O. tagname! = "TR ")
{
If (O. tagname = "table") break;
Else o = O. parentnode;
}
VaR regstr =/\ B \ s * trhover \ B/g;
If (O. classname. indexof ('trhover ') =-1)
O. classname + = "trhover ";
Else
O. classname = O. classname. Replace (regstr ,"");
}
//]>
</SCRIPT>
The idea of the modified hightlightr version is as follows: 1. Process events and obtain page elements that trigger JavaScript events. 2. Find its parent node until TR is found. 3. Perform style processing.

It is worth noting that the browser compatibility is taken into account in obtaining the trigger event element. In the event model of IE, the window object has an event attribute, and the W3C Dom standard event object must be passed to the event handler as a unique parameter, therefore, it exists in a hidden parameter of the function (in the list of 0th parameters. The next step is to prevent some abnormal judgments. The final implementation is still done by modifying the element style table.

So far, the entire trip to highlight table rows compatible with different browsers is over (long-lasting Attribute-mouth -). Great ~ Mistakes are inevitable in this article. If you have suggestions or comments on this article, please criticize and correct them ~ Pai_^