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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
javascript里使用php代码实例
Dec 13 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python基础教程项目二之画幅好画
2018/04/02 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python if语句知识点用法总结
2018/06/10 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
毕业生精彩的自我评价分享
2013/10/06 职场文书
取保候审保证书
2014/04/30 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python