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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python实现多属性排序的方法
2018/12/05 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
计算机系本科生求职信
2014/05/31 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Python数据分析之pandas读取数据
2021/06/02 Python
Python合并多张图片成PDF
2021/06/09 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android