Jquery-based table color changing through the line, move the color changing, click the color changing plug-in _ jquery-js tutorial

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