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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
jQuery限制图片大小的方法
May 25 Javascript
js中常用的Math方法总结
Jan 12 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
django使用channels2.x实现实时通讯
Nov 28 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新手上路(十四)
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
银行竞聘演讲稿范文
2014/04/23 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
董事长致辞
2015/07/29 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL