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 个人笔记(没有整理,很乱)
Jul 07 Javascript
获取body标签的两种方法
Oct 13 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
JS排序之选择排序详解
Apr 08 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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缓存函数的使用说明
2013/05/10 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
jquery键盘事件介绍
2011/01/31 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
深入理解Django中内置的用户认证
2017/10/06 Python
tensorflow识别自己手写数字
2018/03/14 Python
python简单商城购物车实例代码
2018/03/15 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python实现批量修改文件名
2020/03/23 Python
Python用户自定义异常的实现
2020/12/25 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
什么是TCP/IP
2014/07/27 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
庆七一活动方案
2014/01/25 职场文书
思想道德自我评价2015
2015/03/09 职场文书
学校运动会通讯稿
2015/07/18 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python