Highly Efficient table row background and selection of highlighted javascript code _ javascript skills

Source: Internet
Author: User
A project needs to be used, and you don't want to use something like jquery. I first searched the internet and found a lot of ways to change the color of table lines that execute JS in CSS. However, this method is quite slow when there are many table rows, and the test is normal in IE7 and firefox3. This section of JS is placed in the head.

The Code is as follows:


// Set the color of the current row when you click the selected row, and restore the color and mouse events of the row except the current row.
Function selectRow (target)
{
Var sTable = document. getElementById ("ServiceListTable ")
For (var I = 1; I {
If (sTable. rows [I]! = Target) // determines whether the row is currently selected
{
STable. rows [I]. bgColor = "# ffffff"; // sets the background color.
STable. rows [I]. onmouseover = resumeRowOver; // adds an onmouseover event.
STable. rows [I]. onmouseout = resumeRowOut; // adds an onmouseout event.
}
Else
{
STable. rows [I]. bgColor = "# d3d3d3 ";
STable. rows [I]. onmouseover = ""; // remove mouse events
STable. rows [I]. onmouseout = ""; // remove mouse events
}
}
}
// Remove the background color of the expired tr
Function rowOver (target)
{
Target. bgColor = '# e4e4e4 ';
}
// Specifies the background color of tr when it is removed.
Function rowOut (target)
{
Target. bgColor = '# ffff ';
}
// Resume the matching call function of the onmouseover event of tr
Function resumeRowOver ()
{
RowOver (this );
}
// Resume the matching call function of the onmouseout event of tr
Function resumeRowOut ()
{
RowOut (this );
}


For more information about the last two functions resumeRowOver and resumeRowOut, see why I wrote previously to add events to page elements through js.
Corresponding table HTML

The Code is as follows:






































Service items N Status Conclusion Materials
Related content
Related content
Related content
Related content
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.