jQuery代码实现表格中点击相应行变色功能


Posted in Javascript onMay 09, 2016

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于:

jQuery代码实现表格中点击相应行变色功能

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function () {
$('tbody>tr').click(function () {
$(this).addClass('selected') //为选中项添加高亮
.siblings().removeClass('selected')//去除其他项的高亮形式
.end();
});
}); 
</script>
</head>
<body>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
</body>
</html>

以上内容是小编给大家介绍的jQuery代码实现表格中点击相应行变色功能的全部内容,希望对大家有所帮助!

Javascript 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 #Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
Boostrap入门准备之border box
May 09 #Javascript
You might like
PHP开发大型项目的一点经验
2006/10/09 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python装饰器原理与用法分析
2018/04/30 Python
python抖音表白程序源代码
2019/04/07 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
运动会通讯稿300字
2014/02/02 职场文书
学生会主席竞聘书
2014/03/31 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
创先争优个人总结
2015/03/04 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python