JQuery table Row Discoloration

Many projects to improve the user experience require that the rows in the table be discolored when the mouse passes over. Often a project has a lot of songs table, whether we need to add a line color code for all table. If that's the case, it would be a very painful thing ...

First on the effect:

Js:

function Tdrowoverout (table) {

When the mouse passes
$ ("#" + table + "tr TD"). MouseOver (function () {
$ (this). The parent (). Find ("TD"). CSS ("Background-color", "#4fbb65"); Note: The background color of all TD in this row is changed
$ (this). The parent (). Find ("TD"). CSS ("Color", "#FFFFFF"); You can change the font color here if you want
$ (this). The parent (). Find ("TD a"). AddClass ("Whitecolor"); Some TD in addition to the hyperlink, resulting in the above changes in the font color for all a is invalid. Handled separately here
});


When the mouse is removed
$ ("#" + table + "tr TD"). Mouseout (function () {
var BGC = $ (This). Parent (). CSS ("Background-color"); Get TR background color
$ (this). The parent (). Find ("TD"). CSS ("Background-color", BGC); Change the background color of all TD. Here the reader can understand why the mouse is changed by the background color of the TD instead of the background color of TR
$ (this). The parent (). Find ("TD"). CSS ("Color", ' #000000 '); Restore Font Color
$ (this). The parent (). Find ("TD a"). Removeclass ("Whitecolor"); Restores the color of the hyperlink. (Whitecolor is a CSS class defined)
});
}

HTML page

<table id= "Tfactory" >

...

</table>

When used, simply call the table's ID as an argument and invoke the function above:

Tdrowoverout (' tfactory ')

Of course, the function itself can be optimized to make it more versatile, providing only one way of thinking

If you need to see the effect, you can see the effect on www.eorders.cn, the system (9 sqm management software) is done with ASP. You can click "View Demo" in the homepage to find a page with table.