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宝典学习笔记(下)
Jan 10 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
一次编写,随处运行
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python函数返回值实例分析
2015/06/08 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python 模块导入问题汇总
2021/02/01 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
告诉你怎样写创业计划书
2014/01/27 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
考察邀请函范文
2015/01/31 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
生产设备维护保养制度
2015/08/06 职场文书