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 相关文章推荐
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
销售主管竞聘书
2014/03/31 职场文书
求职信名称怎么写
2014/05/26 职场文书
小学数学课题方案
2014/06/15 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
小学见习报告
2014/10/31 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers