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 url传值中文乱码之解决之道
Nov 20 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 #Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 #Javascript
jQuery实现三级菜单的代码
May 09 #Javascript
Boostrap入门准备之border box
May 09 #Javascript
You might like
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JS验证码实现代码
2017/09/14 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python安装whl文件过程图解
2020/02/18 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
教师师德教育的自我评价
2013/10/31 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
音乐教育感言
2014/03/05 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
趣味运动会口号
2015/12/24 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers