jquery实现带复选框的表格行选中删除时高亮显示


Posted in Javascript onAugust 01, 2013

通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除。在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示。这样给人的感觉非常好。

效果如下:
jquery实现带复选框的表格行选中删除时高亮显示 
我做的这里有两个功能:
功能1、单击某行,该行的复选框被选中,同时改变一下背景色。
功能2、单击全选/全不选标签后,改变行的颜色。
两个功能我封装到了js文件中,使用的时候引入就行了。
先看一下CSS的代码,我封装到了一个css文件中

.selected{ 
background:#FF6500; 
color:#fff; 
}

在看js文件的代码:
功能1的代码:
/** 
* 设置含有复选框的表格中的背景色 
*/ 
$(document).ready(function() 
{ 
/** 
* 表格行被单击的时候改变背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //获取第2行后 
{ 
if ($(this).hasClass("selected"))//判断是否选中 
{ 
$(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式 
} 
else//设置选中 
{ 
$(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式 
} 
}); 
});

功能2的代码:
/** 
* 单击全选和反选之后改变背景色 
*/ 
function setColor()//设置tr的背景颜色 
{ 
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框 
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//复选框在td里 
} 
else 
{ 
checkboxs.parent().parent().removeClass("selected"); 
} 
}

如果想要使代码生效,需要给表格加上id属性,属性值为“tablight”,同时全选/全不选之后调用setColor方法就行了。
Javascript 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
document.forms用法示例介绍
Jun 26 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
浅谈javascript错误处理
Aug 11 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 #Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 #Javascript
JavaScript定时器详解及实例
Aug 01 #Javascript
js渐变显示渐变消失示例代码
Aug 01 #Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python实现拓扑排序的基本教程
2018/03/11 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python中二分查找法的实现方法
2020/12/06 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
西安众合通用.net笔试题
2013/03/18 面试题
主管职责范文
2013/11/09 职场文书
十八大报告观后感
2014/01/28 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
工作所在部门证明
2014/09/21 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL