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实现自定义对话框的代码
Jun 15 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js中document.write的那点事
Dec 12 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
React快速入门教程
Jan 17 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
详解Vue的sync修饰符
May 15 Vue.js
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的数据类型
2018/10/24 PHP
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
js实现日历
2020/11/07 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python3.7 sys模块的具体使用
2019/07/22 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
人事专员岗位职责
2013/11/20 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
初中军训感想300字
2014/03/05 职场文书
网络技术专业求职信
2014/07/13 职场文书
单位委托函范文
2015/01/29 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
nginx 配置缓存
2022/05/11 Servers
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis