Home > Web Front-end > JS Tutorial > Table based on Jquery alternate row color change, mobile color change, click color change plug-in_jquery

Table based on Jquery alternate row color change, mobile color change, click color change plug-in_jquery

WBOY
Release: 2016-05-16 18:13:38
Original
1122 people have browsed it

Rendering:
Table based on Jquery alternate row color change, mobile color change, click color change plug-in_jquery
Write the JQUERY plug-in as follows:

Copy the code 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 these options are the same as those in function(options) above option is the same object
//Change color on alternate lines
$("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 to make the method chainable
}
});
})(jQuery);

2. Apply JQUERY plug-in
Copy code The code is as follows:

$(function(){
//According to the default class
$("#table2").alterBgColor()
.find("th").css("font-size","18");
//Custom class, given value;
$("#table1").alterBgColor({
odd:"odd1",
even:"even1",
selected:"mselected"
}).find("th").css("font-size","18");
})

3. Two different table structures:
Copy code Code As follows:
















































  姓名 姓别 暂住地
王锋 北京海淀区肖家河
王兴 河北石家庄
李明 北京昌平区回龙观
程子 北京西城区
赵垛稳 北京海淀区上地
陈曦 北京海淀区万泉庄

















































  姓名 姓别 暂住地
王锋 北京海淀区肖家河
王兴 河北石家庄
李明 北京昌平区回龙观
程子 北京西城区
赵垛稳 北京海淀区上地
陈曦 北京海淀区万泉庄


四、样式如下:
复制代码 代码如下:



This ends, I hope everyone can leave me a comment, thank you!
If you don’t understand, please contact me (Wang Feng QQ: 155259396).
Copy the code The code is as follows:

(function($){
$.fn.extend({
"SetTableBgColor":function(options) {
//Set the default style value
option=$.extend({
odd:"odd",//Odd rows
even:"even",//Even rows
selected :"selected",//Selected row
over:"over"//When the mouse moves up
}, options);//The options here are the same object as the parameters in the function
// Change colors on alternate lines
$("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 query whether the style in the click state has been included
$(this).addClass(option.selected);//Give Add styles to selected rows [hasSelected?"removeClass":"addClass"] Remove and add styles according to whether they are included
});
//Change color when the mouse moves up
$("tbody>tr",this ).mouseover(function(){
$(this).addClass(option.over);
});
//Change back to the original style when the mouse is moved out
$("tbody> tr",this).mouseout(function(){
$(this).removeClass(option.over);
});
return this;//Return this to make the method chainable. Note here Must return otherwise the method cannot be called directly
}
});
})(jQuery);//This place (jquery) must be added, otherwise an error will be reported
//Call the method
// $(".TableList").SetTableBgColor({
// odd:"",
// even: "alt",
// selected: "selected",
/ / over: "over"
// });

/201012/yuanma/SetTableBgColor.rar
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template