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小tip资料
Nov 23 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
js的event详解。
2006/09/06 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
python用户管理系统的实例讲解
2017/12/23 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
国培计划培训感言
2014/03/11 职场文书
买卖车协议书
2014/04/21 职场文书
研究生导师推荐信
2014/09/06 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
《山中访友》教学反思
2016/02/24 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书