首页 > web前端 > js教程 > 基于Jquery的表格隔行换色,移动换色,点击换色插件_jquery

基于Jquery的表格隔行换色,移动换色,点击换色插件_jquery

WBOY
发布: 2016-05-16 18:13:38
原创
1122 人浏览过

效果图:
基于Jquery的表格隔行换色,移动换色,点击换色插件_jquery
编写JQUERY插件如下:

复制代码 代码如下:

;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
option=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options); //注意这个options 同上面的function(options)中的option是同一个对象
//隔行变色
$("tbody>tr:enev",this).addClass(option.even);
$("tbody>tr:odd",this).addClass(option.odd);
//单击行变色
$('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; //返回this,使方法可链
}
});
})(jQuery);

二、应用JQUERY插件
复制代码 代码如下:

$(function(){
//按默认类
$("#table2").alterBgColor()
.find("th").css("font-size","18");
//自定义类,给定值;
$("#table1").alterBgColor({
odd:"odd1",
even:"even1",
selected:"mselected"
}).find("th").css("font-size","18");
})

三、两个不同的表格结构:
复制代码 代码如下:










;
















































;







































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



就此结束,希望大家都给 me--评论评论,谢谢!
如果不明白请与我(王锋 QQ:155259396)联系.
复制代码 代码如下:

(function($){
$.fn.extend({
"SetTableBgColor":function(options){
//设置默认样式值
option=$.extend({
odd:"odd",//奇数行
even:"even",//偶数航
selected:"selected",//选中行
over:"over"//鼠标移动上去时
},options);//此处options与function里的参数为同一个对象
//隔行换色
$("tbody>tr:even",this).addClass(option.even);
$("tbody>tr:odd",this).addClass(option.odd);
//单击行变色
$("tbody>tr",this).click(function(){
$("tbody>tr").removeClass(option.selected);
//var hasSelected=$(this).hasClass(option.selected);//返回true或false 查询是否已经包含点击状态下的样式
$(this).addClass(option.selected);//给选中行添加样式 [hasSelected?"removeClass":"addClass"]根据是否包含移除和添加样式
});
//鼠标移动上去变色
$("tbody>tr",this).mouseover(function(){
$(this).addClass(option.over);
});
//鼠标移出时变回原来的样式
$("tbody>tr",this).mouseout(function(){
$(this).removeClass(option.over);
});
return this;//返回this,使方法可链 注意 这里必须返回 否则无法直接的调用方法
}
});
})(jQuery);//这个地方(jquery)必须加上,不然会报错
//调用方法
// $(".TableList").SetTableBgColor({
// odd:"",
// even:"alt",
// selected:"selected",
// over:"over"
// });

/201012/yuanma/SetTableBgColor.rar
姓名 姓别 暂住地
王锋 北京海淀区肖家河
王兴 河北石家庄
李明 北京昌平区回龙观
程子 北京西城区
赵垛稳 北京海淀区上地
陈曦 北京海淀区万泉庄
姓名 姓别 暂住地
王锋 北京海淀区肖家河
王兴 河北石家庄
李明 北京昌平区回龙观
程子 北京西城区
赵垛稳 北京海淀区上地
陈曦 北京海淀区万泉庄
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板