The Jquery-based table is subject to line-by-line color change, mobile color change, and click the color change plug-in.

:

Compile the JQUERY plug-in as follows: Copy codeThe Code is as follows:; (function ($ ){
$. Fn. extend ({
"AlterBgColor": function (options ){
// Set the default value
Option = $. extend ({
Odd: "odd ",
Even: "even ",
Selected: "selected"
}, Options); // note that the option in the same options function (options) is the same object.
// Switch the color
$ ("Tbody> tr: enev", this). addClass (option. even );
$ ("Tbody> tr: odd", this). addClass (option. odd );
// Click the 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; // return this so that the method can be chained
}
});
}) (JQuery );

Ii. Apply the JQUERY plug-inCopy codeThe Code is as follows: $ (function (){
// By default class
$ ("# Table2"). alterBgColor ()
. Find ("th" ).css ("font-size", "18 ");
// Custom class, set value;
$ ("# Table1"). alterBgColor ({
Odd: "odd1 ",
Even: "even1 ",
Selected: "mselected"
}). Find ("th" ).css ("font-size", "18 ");
})

3. Two different table structures:Copy codeThe Code is as follows: <table width = "394" height = "115" border = "0" cellpadding = "3" cellspacing = "1" id = "table2">
<Thead class = "caption">
<Tr id = "title">
<Th> </th>
<Th height = "32"> name </th>
<Th> name </th>
<Th> temporary residence </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "1"/> </td>
<Td> Wang Feng </td>
<Td> male </td>
<Td> Xiao Jiahe, Haidian District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "2"/> </td>
<Td> WANG Xing </td>
<Td> female </td>
<Td> Shijiazhuang, Hebei Province </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "3"/> </td>
<Td> Li Ming </td>
<Td> male </td>
<Td> Huilongguan, Changping District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "4"/> </td>
<Td> Cheng Zi </td>
<Td> male </td>
<Td> Xicheng District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "5"/> </td>
<Td> Zhao zhuwen </td>
<Td> male </td>
<Td> Shangdi, Haidian District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "6"/> </td>
<Td> Chen Xi </td>
<Td> female </td>
<Td> wanquanzhuang, Haidian District, Beijing </td>
</Tr>
</Tbody>
</Table>

<Table width = "394" height = "115" border = "0" cellpadding = "3" cellspacing = "1" id = "table1">
<Thead class = "caption">
<Tr id = "title">
<Th> </th>
<Th height = "32"> name </th>
<Th> name </th>
<Th> temporary residence </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "1"/> </td>
<Td> Wang Feng </td>
<Td> male </td>
<Td> Xiao Jiahe, Haidian District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "2"/> </td>
<Td> WANG Xing </td>
<Td> female </td>
<Td> Shijiazhuang, Hebei Province </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "3"/> </td>
<Td> Li Ming </td>
<Td> male </td>
<Td> Huilongguan, Changping District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "4"/> </td>
<Td> Cheng Zi </td>
<Td> male </td>
<Td> Xicheng District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "5"/> </td>
<Td> Zhao zhuwen </td>
<Td> male </td>
<Td> Shangdi, Haidian District, Beijing </td>
</Tr>
<Tr>
<Td> <input name = "id" type = "checkbox" value = "6"/> </td>
<Td> Chen Xi </td>
<Td> female </td>
<Td> wanquanzhuang, Haidian District, Beijing </td>
</Tr>
</Tbody>
</Table>

4. The style is as follows:Copy codeThe Code is 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>

I hope everyone will give me a comment. Thank you!
If you do not understand, please contact me (Wang Feng QQ: 155259396.Copy codeThe Code is as follows: (function ($ ){
$. Fn. extend ({
"SetTableBgColor": function (options ){
// Set the default style Value
Option = $. extend ({
Odd: "odd", // odd number of rows
Even: "even", // even
Selected: "selected", // select a row
Over: "over" // when the mouse moves up
}, Options); // The options and function parameters are the same object.
// Change the color of the line
$ ("Tbody> tr: even", this). addClass (option. even );
$ ("Tbody> tr: odd", this). addClass (option. odd );
// Click the row to change color.
$ ("Tbody> tr", this). click (function (){
$ ("Tbody> tr"). removeClass (option. selected );
// Var hasSelected = $ (this). hasClass (option. selected); // return true or false to check whether the style in the click state is included
$ (This). addClass (option. selected); // Add the style [hasSelected? "RemoveClass": "addClass"] Remove and add styles based on whether or not they are included
});
// The color changes when the mouse moves.
$ ("Tbody> tr", this). mouseover (function (){
$ (This). addClass (option. over );
});
// When the mouse is removed, the original style is returned.
$ ("Tbody> tr", this). mouseout (function (){
$ (This). removeClass (option. over );
});
Return this; // return this so that the method can be chained. Note that this must be returned. Otherwise, the method cannot be called directly.
}
});
}) (JQuery); // This Place (jquery) must be added; otherwise, an error will be reported.
// Call Method
// $ (". TableList"). SetTableBgColor ({
// Odd :"",
// Even: "alt ",
// Selected: "selected ",
// Over: "over"
//});

/201012/yuanma/SetTableBgColor.rar