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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JQuery实现图片轮播效果
May 08 jQuery
微信小程序多张图片上传功能
Jun 07 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
微信小程序实现点击导航条切换页面
Nov 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
第二节--PHP5 的对象模型
2006/11/16 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
做网页的一些技巧
2007/02/01 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python算法题 链表反转详解
2019/07/02 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
人事经理岗位职责
2014/04/28 职场文书
解除劳动合同证明书
2014/09/26 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
同意迁入证明模板
2014/10/26 职场文书
2014年检验员工作总结
2014/11/19 职场文书
领导干部考核评语
2015/01/04 职场文书