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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
js实现蒙版效果
Jan 11 Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 #Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 #Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 #Javascript
ajax跨域调用webservice的实现代码
May 09 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
python机器学习之神经网络(一)
2017/12/20 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python中time库的实例使用方法
2019/10/31 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
企业面试题试卷附带答案
2015/12/20 面试题
绿色城市实施方案
2014/03/19 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
SQL写法--行行比较
2021/08/23 SQL Server
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
Java实现简单小画板
2022/06/10 Java/Android