I hope to share my studies with you. First, put a jquery plug-in learned last week. The Jquery-based table is used to change colors, move and change colors, and click the ins. :
Compile the JQUERY plug-in as follows:
The 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-in
The 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:
The Code is as follows:
|
Name |
Surname |
Temporary Residence |
|
Wang Feng |
Male |
Xiao Jiahe, Haidian District, Beijing |
|
WANG Xing |
Female |
Shijiazhuang, Hebei Province |
|
Li Ming |
Male |
Beijing Changping District Hui longguan |
|
Cheng Zi |
Male |
Xicheng District, Beijing |
|
Zhao zhuwen |
Male |
Shangdi, Haidian District, Beijing |
|
Chen Xi |
Female |
Wanquanzhuang, Haidian District, Beijing |
|
Name |
Surname |
Temporary Residence |
|
Wang Feng |
Male |
Xiao Jiahe, Haidian District, Beijing |
|
WANG Xing |
Female |
Shijiazhuang, Hebei Province |
|
Li Ming |
Male |
Beijing Changping District Hui longguan |
|
Cheng Zi |
Male |
Xicheng District, Beijing |
|
Zhao zhuwen |
Male |
Shangdi, Haidian District, Beijing |
|
Chen Xi |
Female |
Wanquanzhuang, Haidian District, Beijing |
4. The style is as follows:
The Code is as follows:
I hope everyone will give me a comment. Thank you!
If you do not understand, please contact me (Wang Feng QQ: 155259396.
The 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