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 相关文章推荐
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
js实现百度登录窗口拖拽效果
Mar 19 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
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
axios post提交formdata的实例
2018/03/16 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
微信小程序用canvas画图并分享
2020/03/09 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Python检查ping终端的方法
2019/01/26 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python中count函数简单用法
2020/01/05 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python 实现aes256加密
2020/11/27 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
医学生自荐信
2013/12/03 职场文书
和平主题的演讲稿
2014/01/12 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL