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 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
vue实现微信分享功能
Nov 28 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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异步调用socket实现代码
2012/01/12 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
php桥接模式应用案例分析
2019/10/23 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
Egret引擎开发指南之编译项目
2014/09/03 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Django的信号机制详解
2017/05/05 Python
Python模拟登陆实现代码
2017/06/14 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
介绍一下write命令
2012/09/24 面试题
我的求职计划书
2014/01/10 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
火烧圆明园观后感
2015/06/03 职场文书
解析MySQL索引的作用
2022/03/03 MySQL