Based on jquery table alternate color, move color, click the color-changing plug-in _jquery

Effect Chart:

The jquery plugin is written as follows:

Copy Code code as follows:

;(function ($) {
$.fn.extend ({
"Alterbgcolor": function (Options) {
Set default values
Option=$.extend ({
Odd: "Odd",
Even: "Even",
Selected: "Selected"
},options); Note that this option is the same object as options in the above function (options)
Interlace Color
$ ("Tbody>tr:enev", this). addclass (Option.even);
$ ("tbody>tr:odd", this). addclass (option.odd);
Click a row to change color
$ (' tbody>tr ', this). Click (function () {
var hasselected = $ (this). Hasclass (option.selected);
$ (this) [hasselected?] Removeclass ":" AddClass "] (option.selected)
. Find (": CheckBox"). attr (' checked ',!hasselected);
});
$ ("Tbody>tr:has (: Checked)", this). addclass (option.selected);
return this; Returns this so that the method can be chained
}
});
}) (JQuery);

Second, the application of jquery Plug-ins

Copy Code code as follows:

$ (function () {
By default class
$ ("#table2"). Alterbgcolor ()
. Find ("th"). CSS ("Font-size", "18");
Custom class, given a value;
$ ("#table1"). Alterbgcolor ({
Odd: "Odd1",
Even: "Even1",
Selected: "Mselected"
). Find ("th"). CSS ("Font-size", "18");
})

Three, two different table structures:

Copy Code code as follows:

<table width= "394" height= "0" border= "3" cellpadding= "1" cellspacing= "id=" >
<thead class= "caption" >
<tr id= "title" >
<th> </th>
<th height= > Name </th>
<th> Surname </th>
<th> Temporary Land </th>
</tr>
</thead>
<tbody>
<tr>
<td><input name= "id" type= "checkbox" value= "1"/></td>
<td> Wang Feng </td>
<td> male </td>
<td> Xiaojiahe </td>, Haidian District, Beijing
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "2"/></td>
<td> Wang </td>
<td> Women </td>
<td> Shijiazhuang, Hebei </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "3"/></td>
<td> Li Ming </td>
<td> male </td>
<td> Beijing Changping District Huilongguan </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "4"/></td>
<td> Cheng Zi </td>
<td> male </td>
<td> Xicheng Area </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "5"/></td>
<td> Zhao Duo Stability </td>
<td> male </td>
<td> Haidian District, Beijing </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "6"/></td>
<td> Chen </td>
<td> Women </td>
<td> Wan </td>, Haidian District, Beijing
</tr>
</tbody>
</table>

<table width= "394" height= "0" border= "3" cellpadding= "1" cellspacing= "id=" >
<thead class= "caption" >
<tr id= "title" >
<th> </th>
<th height= > Name </th>
<th> Surname </th>
<th> Temporary Land </th>
</tr>
</thead>
<tbody>
<tr>
<td><input name= "id" type= "checkbox" value= "1"/></td>
<td> Wang Feng </td>
<td> male </td>
<td> Xiaojiahe </td>, Haidian District, Beijing
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "2"/></td>
<td> Wang </td>
<td> Women </td>
<td> Shijiazhuang, Hebei </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "3"/></td>
<td> Li Ming </td>
<td> male </td>
<td> Beijing Changping District Huilongguan </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "4"/></td>
<td> Cheng Zi </td>
<td> male </td>
<td> Xicheng Area </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "5"/></td>
<td> Zhao Duo Stability </td>
<td> male </td>
<td> Haidian District, Beijing </td>
</tr>
<tr>
<td><input name= "id" type= "checkbox" value= "6"/></td>
<td> Chen </td>
<td> Women </td>
<td> Wan </td>, Haidian District, Beijing
</tr>
</tbody>
</table>

Four, the style is as follows:

Copy Code code as follows:

<style>
. even{background: #E3C575;}
. odd{background: #D5D500;}
. selected{background: #FF6262; color: #FFFFFF;}
table{border: #666666 1px solid; font-size:12px;}
Table. caption{background: #B0B0FF; color: #FFFFFF; test-align:left;}
. even1{background: #C6FBB9;}
. odd1{background: #FFB9DC;}
. mselected{background: #F5CEA7; color: #FFFFFF;}
</style>

This end, I hope everyone to me--comments, thank you!
If you do not understand, please contact me (Wang Feng qq:155259396).

Copy Code code as follows:

(function ($) {
$.fn.extend ({
"Settablebgcolor": function (Options) {
Set Default style values
Option=$.extend ({
Odd: "odd",//Odd line
Even: "even",//even air
Selected: "Selected",//Select BOC
Over: "Over"//when the mouse moves up
},options)//Here the options are the same as the parameters in the function
Alternate color of interlaced
$ ("Tbody>tr:even", this). addclass (Option.even);
$ ("tbody>tr:odd", this). addclass (option.odd);
Click a row to change color
$ ("Tbody>tr", this). Click (function () {
$ ("Tbody>tr"). Removeclass (option.selected);
var hasselected=$ (this). Hasclass (option.selected);//returns TRUE or false the query already contains the style in the click state
$ (this). addclass (option.selected);//Add style to selected rows [hasselected?] Removeclass ': ' AddClass '] based on whether or not to include the Remove and add styles
});
The mouse moves up to change color
$ ("Tbody>tr", this). MouseOver (function () {
$ (this). addclass (Option.over);
});
Move the mouse out of time and back to the original style
$ ("Tbody>tr", this). Mouseout (function () {
$ (this). Removeclass (Option.over);
});
Return this;//returns this so that the method can be chained to note that this must be returned otherwise the method cannot be invoked directly
}
});
(jquery);//This place (jquery) must be added, or it will be an error
Call method
// $(". Tablelist "). Settablebgcolor ({
Odd: "",
Even: "Alt",
Selected: "Selected",
Over: "Over"
// });

/201012/yuanma/settablebgcolor.rar