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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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
PHP4之真OO
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
python开发一款翻译工具
2020/10/10 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
店长岗位职责
2013/11/21 职场文书
七一党建活动方案
2014/01/28 职场文书
优秀语文教师事迹
2014/05/18 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
学校食堂标语
2014/10/06 职场文书
初一英语教学反思
2016/02/15 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers