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中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 #Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 #Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
You might like
php xml文件操作代码(一)
2009/03/20 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python continue语句用法实例
2014/03/11 Python
Python CSV模块使用实例
2015/04/09 Python
django之常用命令详解
2016/06/30 Python
python实现排序算法解析
2018/09/08 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
python高级特性简介
2020/08/13 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
代理协议书范本
2014/04/22 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
通知范文怎么写
2015/04/16 职场文书
校园安全教育心得体会
2016/01/15 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书