This article serves as one of the development learning notes.
Text
In web development, you often encounter situations where you need to highlight the table rows that the mouse points to. First of all, talk about the general situation.
• Simple attempt
CSS2 allows us to use the hover pseudo class for HTML elements, which greatly facilitates the control of the style of the table.
Let's start with a small example:
XHTML (only the table part is listed, please complete the page by itself, this example is passed under the Transational DTD):
Copy Code code as follows:
<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 you define the style of the table with CSS:
Copy Code code as follows:
. datatable{
MARGIN:15PX Auto;
width:500px; /* These two lines can be modified as needed, just for example * *
}
. 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;
}
For the part of CSS, do not explain too much. Note The last bold section, which has a pseudo-class hover style applied to the TR element. This works perfectly in the browsers supported by CSS2 (Ie7+,ff,opera,safari, etc.). However, CSS1 only provides pseudo class support for anchor element A, unfortunately IE6 still only supports CSS1 pseudo classes. So we have to make changes to provide support for IE6.
First add a style:
Copy Code code as follows:
. DataTable. Trhover,.datatable tr:hover{
Background-color: #cfe9f7;
}
A Trhover class is added here to correct the display under IE6. The next step is to write JavaScript. The initial idea is very simple, don't you want to point to the mouse to highlight the current line? So I applied javascipt to every line. First, write a JavaScript function. To unify my highlight and undo highlighting into a function, this simplifies function invocation and binds a function to the mouseover and mouseout events of tr.
Copy Code code as follows:
function Highlighttr (o) {
var regstr=/\b\s*trhover\b/g; /* Regular Expression Filter Trhover class * *
if (O.classname.indexof (' Trhover ') ==-1)
o.classname+= "Trhover";
Else
O.classname=o.classname.replace (Regstr, "");
}
Here's a tip: regular expression substitution. Because your TR element may have other styles (classes)--such as the Evenrow and oddrow of this example--you can't simply empty the object's classname when you undo the highlight. And then as you can imagine, give TR a binding event:
Copy Code code as follows:
<tr class= "Oddrow" onmouseover= "highlighttr ();" onmouseout= "hightlighttr ();" >
<td> Project Item1</td>
<td> value value1</td>
</tr>
It's OK to write the event bindings for all tr. However, there is also a problem: 1, increased the amount of code on the page. 2. If the table is output by the backend server, sometimes you are not allowed to bind a JavaScript function to a TR element. What to do? Directly, you can use JS in a range of pages to search for the style of the table, and then bind the TR event. But today we change the idea, directly to the Table element binding JS event, to achieve a line of highlighting!
There is a basis for this idea. This has to be said about the browser's event model. Due to historical reasons, various browsers in the implementation of JavaScript event response differences, but the basic idea is still the same. The JS event is described as a capture-bubble model in the consortium DOM. Simple to say a bit like under dumplings, dumplings gradually sank to the bottom of the pot, received heat transfer, slowly drift to the top. Back to the model itself, the JavaScript event has two broad classes, first capturing the event from the outermost element, and gradually passing it inward to the element that triggers the event--called event capture, and then gradually extends outward to the outer element--this is called event bubbling. The implementation of IE does not support capture-type events, and the implementation of bubbling events differs slightly from the global Dom standard, but the general idea is the same.
For a long time, we want to use the event bubbling mechanism to achieve the purpose of highlighting table rows.
Again, the bubbling event spreads from the outermost element that triggers the JavaScript event to the outer layer, like the ripple of a pebble. The mouse over a line, first the most inner elements such as TD in the text or other elements trigger mouseover, and then spread to td-->tr-->tbody-->table in response to the MouseOver event, the mouse moved out, There is also this process of bubbling in sequence. That's how we handle the incident response program.
First, we need to modify the event binding code in the XHMTL. Remove the mouseover and Mouseout event handling from the TR element, and then add event handling to the table. The final form becomes this:
Copy Code code 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 to the original table we wrote, only a TABLE element's JS event binding is more. The next step is to do a major operation on our hightlighttr function! This is where the final code is posted and then analyzed together:
Copy Code code as follows:
<script type= "Text/javascript" >
<!-[cdata[
This function fixes a bug that IE6 cannot recognize a TR element hover pseudo class
function Highlighttr () {
var theevent=window.event| | Arguments.callee.caller.arguments[0];
var srcelement = theevent.srcelement;
if (!srcelement)
{
srcelement = Theevent.target;
}
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 revised HIGHTLIGHTR version of the idea is this: 1, handling events, get the page elements that trigger JavaScript events. 2, look for its parent node until you find the tr. 3, the style processing.
It is worth saying that the part that gets the trigger event element takes into account browser compatibility. In IE's event model, the Window object has an event attribute, and the Library DOM standard event object must be passed as a unique parameter to the event handler, so it exists in a hidden parameter of the function (in the No. 0 of the argument list). The next step is to prevent some of the anomalies from being judged. The final implementation is still done by modifying the element style sheet.
So far the entire browser-compatible highlight table row trip ended (a long attribute--the mouth--). It's fun. It is inevitable to omission errors, if there are suggestions or comments on this article welcome criticism ~ ^_^
