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变量作用域更轻松
Oct 25 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue 自动化路由实现代码
2019/09/03 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python正则表达式的使用范例详解
2014/08/08 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python gdal安装与简单使用
2019/08/01 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
个人求职意向书
2015/05/11 职场文书
入党介绍人考察意见
2015/06/01 职场文书
小学总务工作总结
2015/08/13 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis