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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
Javascript 对象的解释
Nov 24 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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 socket编程
2015/05/13 PHP
php 可变函数使用小结
2018/06/12 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
玩转方法:call和apply
2014/05/08 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
python中bisect模块用法实例
2014/09/25 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python实现图片九宫格分割
2021/03/07 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
软件测试题目
2013/02/27 面试题
财务会计应届生求职信
2013/11/24 职场文书
个人自我鉴定写法
2013/11/30 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
购房协议书范本
2014/04/11 职场文书
小学毕业演讲稿
2014/04/25 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
活着观后感
2015/06/03 职场文书
教务处干事工作总结
2015/08/14 职场文书
Python 内置函数速查表一览
2021/06/02 Python