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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
js选项卡的实现方法
Feb 09 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
js实现随机点名小功能
Aug 17 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
js模拟实现烟花特效
Mar 10 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 array_multisort()函数的使用札记
2011/07/03 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
用Python编写web API的教程
2015/04/30 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python 加密的实例详解
2017/10/09 Python
pandas中的series数据类型详解
2019/07/06 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
校本教研工作方案
2014/01/14 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang