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中使用setInterval和setTimeout的方法
Apr 08 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue-router的两种模式的区别
May 30 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
JS性能优化实现方法及优点进行
Aug 30 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 咖啡文化
简单的页面缓冲技术
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Python字典简介以及用法详解
2016/11/15 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python实现一个猜拳游戏
2020/04/05 Python
python操作redis数据库的三种方法
2020/09/10 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
暑期培训随笔感言
2014/03/10 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
于丹论语心得观后感
2015/06/15 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers