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焦点图切换,上下翻转
May 12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
js中如何完美的解析数据
Mar 18 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php 伪静态之IIS篇
2014/06/02 PHP
css图片自适应大小
2007/11/28 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python实现月食效果实例代码
2019/06/18 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python openssl模块安装及用法
2020/12/06 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
经典大学生求职信范文
2014/01/06 职场文书
采购助理岗位职责
2014/02/16 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
婚礼新人答谢词
2015/01/04 职场文书
创业计划书之书店
2019/09/10 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android