Example _ jquery

When you move the mouse over the table, the color changes and the visual recognition effect is displayed. The following is a good example. For details, refer to section 1. design the table.

The Code is as follows:

Employee ID	Name	Age	Gender
2014010101	Zhang Feng	56	Male
2014010102	Li Yu	42	Female
2014010103	Wang Ke	36	Male
2014010104	Zhang Yu	31	Female
2014010105	Zhu Gu	44	Male
2014010106	Hu Yu	35	Female
2014010107	Liu Xi	30	Male
2014010108	Sun Yu	45	Female
2014010109	Gu Yu	33	Male
2014010110	Koyu	45	Female

2. Design Style

The Code is as follows:

. Html_body. body_p {
Width: 1340;
Height: 595;
}
. Body_p {
Font-size: 12px;
Background-color: # CCCCCC;
}
. Tr_odd {
Background-color: orange;
}
. Tr_even {
Background-color: aqua;
}
. Mouse_color {
Background-color: green;
}
# Tab {
Border: 1px # FF0000 solid;
Text-align: center;
Width: 100%;
Height: 100%;
}

3. Design JS

The Code is as follows:

// Set the background color of an odd row
$ ("# Tab tr: odd"). find ("td"). addClass ("tr_odd ");
// Set the background color of an even row
$ ("# Tab tr: even"). find ("td"). addClass ("tr_even ");

/**
* Mouse movement color
*/
$ ("# Tab tr"). mouseover (function (){
$ (This). find ("td"). addClass ("mouse_color ");
});

/**
* Color of mouse Removal
*/
$ ("# Tab tr"). mouseout (function (){
$ (This). find ("td"). removeClass ("mouse_color ");
});

4. design results

(1) initialization

(2) Click an odd number of rows

(3) Click an even row.

5. Appendix

The Code is as follows:

<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>





Table color changes with the mouse