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