Highlight javascript code for table rows on web pages_javascript techniques

This article serves as one of the development study notes.
[Text]
In web development, we often encounter situations where we need to highlight the table row pointed by the mouse. First let’s talk about the general situation.
·Easy try
CSS2 allows us to use hover pseudo-classes for HTML elements, which greatly facilitates the control of table styles.
We start with a small example:
XHTML (only the table part is listed, please complete the page by yourself, this example is passed under Transational's DTD):

Copy code The code is as follows:

< ;tr class="oddRow">















Then use CSS to define the style of the table:



Copy the code

The code is as follows: .datatable{ margin:15px auto;

width:500px; /*These two lines can be modified as needed, just an 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;
}


I won’t explain too much about the css part. Please note that the bolded part at the end applies a pseudo-hover style to the tr element. This works perfectly under browsers that support CSS2 (IE7, FF, Opera, Safari, etc.). However, CSS1 only provides pseudo-class support for the anchor element a. Unfortunately, IE6 still only supports CSS1 pseudo-classes. So we have to make modifications to provide support for IE6.
First add a style:

Copy the code

The code is 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 the current line to be highlighted when the mouse is pointed? So just apply javascipt to each line. First write a javascript function. For the sake of unification, I combined highlighting and undoing the highlighting into one function, so that function calls can be simplified. Just bind a function to the mouseover and mouseout events of tr.

Copy code

The code is as follows: function highlightTr(o){ var regStr= /bs*trHoverb/g; /*Regular expression filter trHover class*/

if(o.className.indexOf('trHover')==-1)

o.className =" trHover";
else
o.className=o.className.replace(regStr,"");
}


A little trick is used here: regular expression replacement. Because your tr element may have other styles (classes) - such as evenRow and oddRow in this example, you cannot simply leave the object's className blank when de-highlighting. Then just as everyone imagined, bind the event to tr:

Copy the code

The code is as follows:

ValueValue1


Just write event bindings for all tr. However, there are also problems with this: 1. It increases the amount of code on the page. 2. If the table is output by a background server program, sometimes you are not allowed to bind JavaScript functions to the tr element. what to do? Thinking directly, you can use js to search for tables of this style in a certain range of the page, and then bind the tr event. But let’s change our thinking today and bind js events directly to the table element to highlight a certain row!
This idea is well founded. This has to talk about the browser's event model. Due to historical reasons, various browsers have differences in how they implement JavaScript event responses, but the basic idea is still the same. js events are described in the W3C DOM as a capture-bubble model. To put it simply, it's a bit like making dumplings. The dumplings gradually sink to the bottom of the pot, accept the heat transfer, and slowly float to the top. Back to the model itself, there are two major categories of JavaScript events. First, capture the event from the outermost element, and gradually pass it inward to the element that triggered the event - this is called event capture, and then gradually expand 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 is slightly different from the W3C DOM standard, but the overall idea is the same.
After talking for a long time, we just want to use the event bubbling processing mechanism to achieve the purpose of highlighting table rows.
Once again, bubbling events spread from the innermost element that triggers the JavaScript event to the outer layer, just like the ripples caused by a stone. When the mouse slides over a certain line, first the innermost element such as text or other elements in td triggers mouseover, and then it is passed to td-->tr-->tbody-->table and responds to the mouseover event in turn. When the mouse moves out , there is also this sequential bubbling process. This is how we approach incident responders.
First, we need to modify the event binding code in XHMTL. Remove the mouseover and mouseout event handling in the tr element, and then add event handling to the table. The final table becomes like this:

Copy code The code is as follows:

Item	Value
ItemItem1	ValueValue1
ItemItem2	ValueValue2
ItemItem3	ValueValue3
ItemItem4	ValueValue4
ItemItem5	ValueValue5	Item Item6	ValueValue6
Item1

> ;








;td>ItemItem2


ItemItem3

/td>

Item	Value
ItemItem1	ValueValue1
ValueValue2
ValueValue3
ValueValue4
ValueValue5
ItemItem6	ValueValue6

It is similar to the table we originally wrote Compared with this, it only has more js event binding for table elements. The next step is to perform major surgery on our highlightTr function! Here I will post the final code first and then analyze it together:

Copy the code

The code is as follows: ////This function corrects the bug that IE6 cannot recognize 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 .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=/bs*trHoverb/g;
if(o. className.indexOf('trHover')==-1)
o.className =" trHover";
else
o.className=o.className.replace(regStr,"");
}
//]]>



The idea of ​​the modified hightlightTr version is as follows: 1. Process the event and obtain the page element that triggers the javascript event. 2. Search for its parent node until tr is found. 3. Perform style processing.
It is worth mentioning that the part of obtaining the trigger event element takes browser compatibility into consideration. In IE's event model, the window object has an event attribute, and the W3C DOM standard event object must be passed to the event processing function as the only parameter, so it exists in a hidden parameter of the function (the 0th one in the parameter list). The next step is to make some judgments to prevent exceptions. The final implementation is completed by modifying the element style sheet.
This is the end of the journey of highlighting table rows compatible with different browsers (so long attributive - mouth -). It’s fun~ There are inevitable omissions and errors in the article. If you have any suggestions or comments about this article, please criticize and correct me~ ^_^