基于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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
javascript 常用功能总结
Mar 18 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
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实现分页工具类分享
2014/01/09 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
JS实现时间格式化的方式汇总
2013/10/16 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
python热力图实现简单方法
2021/01/29 Python
建龙钢铁面试总结
2014/04/15 面试题
个人找工作的自我评价
2013/10/17 职场文书
担保书格式及范文
2014/04/01 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
小学体育课教学反思
2016/02/16 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫