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的键盘控制事件说明
Apr 15 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
利用python画出折线图
2018/07/26 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python实现双色球随机选号
2020/01/01 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
高中语文教学反思范文
2016/02/16 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis