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模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
jquery validate demo 基础
Oct 29 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python numpy 常用函数总结
2017/12/07 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python里glob模块知识点总结
2021/01/05 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
就业自荐信
2013/12/04 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
2014年司法所工作总结
2014/11/22 职场文书
教育实习指导教师评语
2014/12/31 职场文书