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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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/11/19 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Python装饰器基础详解
2016/03/09 Python
python爬取51job中hr的邮箱
2016/05/14 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python打包多类型文件的操作方法
2020/09/21 Python
python如何对链表操作
2020/10/10 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
银行学习十八大感想
2014/01/11 职场文书
绩效工资分配方案
2014/01/18 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python