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


Posted in Javascript onDecember 22, 2010

效果图:
基于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"); 
})

三、两个不同的表格结构:
<table width="394" height="115" border="0" cellpadding="3" cellspacing="1" id="table2"> 
<thead class="caption"> 
<tr id="title"> 
<th> </th> 
<th height="32">姓名</th> 
<th>姓别</th> 
<th>暂住地</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input name="id" type="checkbox" value="1" /></td> 
<td>王锋</td> 
<td>男</td> 
<td>北京海淀区肖家河</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="2" /></td> 
<td>王兴</td> 
<td>女</td> 
<td>河北石家庄</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="3" /></td> 
<td>李明</td> 
<td>男</td> 
<td>北京昌平区回龙观</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="4" /></td> 
<td>程子</td> 
<td>男</td> 
<td>北京西城区</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="5" /></td> 
<td>赵垛稳</td> 
<td>男</td> 
<td>北京海淀区上地</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="6" /></td> 
<td>陈曦</td> 
<td>女</td> 
<td>北京海淀区万泉庄</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">姓名</th> 
<th>姓别</th> 
<th>暂住地</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td><input name="id" type="checkbox" value="1" /></td> 
<td>王锋</td> 
<td>男</td> 
<td>北京海淀区肖家河</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="2" /></td> 
<td>王兴</td> 
<td>女</td> 
<td>河北石家庄</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="3" /></td> 
<td>李明</td> 
<td>男</td> 
<td>北京昌平区回龙观</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="4" /></td> 
<td>程子</td> 
<td>男</td> 
<td>北京西城区</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="5" /></td> 
<td>赵垛稳</td> 
<td>男</td> 
<td>北京海淀区上地</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="6" /></td> 
<td>陈曦</td> 
<td>女</td> 
<td>北京海淀区万泉庄</td> 
</tr> 
</tbody> 
</table>

四、样式如下:
<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>

就此结束,希望大家都给 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
Javascript 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
jQuery Clone Bug解决代码
Dec 22 #Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 #Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
jquery里的each使用方法详解
Dec 22 #Javascript
jQuery学习笔记之jQuery的动画
Dec 22 #Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
You might like
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
python处理csv数据的方法
2015/03/11 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
django创建超级用户过程解析
2019/09/18 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
python实现从wind导入数据
2019/12/03 Python
Python continue语句实例用法
2020/02/06 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
关于教师节的广播稿
2015/08/19 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis