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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
canvas实现探照灯效果
Feb 07 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
json数据格式常见操作示例
Jun 13 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
yii框架配置默认controller和action示例
2014/04/30 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
windows系统下Python环境搭建教程
2017/03/28 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
ORACLE第二个十问
2013/12/14 面试题
2014年圣诞节促销方案
2014/03/14 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
刑事申诉状范文
2015/05/20 职场文书
如何在Python项目中引入日志
2021/05/31 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
MySQL深分页问题解决思路
2022/12/24 MySQL