jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例


Posted in Javascript onFebruary 14, 2017

本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下:

最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。

jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

前台代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQuer的鼠标悬浮,鼠标高亮效果</title>
  <style type="text/css">
  #header
  {
    background-color:#00ffff;
    text-align:center;
  }
  .style1
  {
    text-align: right;
  }
  .style2
  {
    text-align: center;
  }
  </style>
  <link href="tables.css" rel="external nofollow" rel="stylesheet" type="text/css" />
  <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
    doChangeColorOfRow("#tableThis tr:even:not(#header)", "#tableThis tr:odd:not(#header)");
    });
    function doChangeColorOfRow(evenTR, oddTR) {
    $(evenTR).each(function() {
      $(this).css("background-color", "#F0F8FF").bind("mouseover", function() {
        if ($(this).css("background-color") != "#ffff00") {
          $(this).css("background-color", "#D8FAD8");
        }
      }).bind("mouseout", function() {
        if ($(this).css("background-color") != "#ffff00") {
          $(this).css("background-color", "#F0F8FF");
        }
      }).bind("click", function() {
        $(evenTR).each(function() {
          if ($(this).css("background-color") == "#ffff00") {
            $(this).css("background-color", "#F0F8FF");
          }
        });
        $(oddTR).each(function() {
          if ($(this).css("background-color") == "#ffff00") {
            $(this).css("background-color", "#ffffff");
          }
        });
        $(this).css("background-color", "#ffff00");
      });
    });
    $(oddTR).each(function() {
      $(this).css("background-color", "#ffffff").bind("mouseover", function() {
        if ($(this).css("background-color") != "#ffff00") {
          $(this).css("background-color", "#D8FAD8");
        }
      }).bind("mouseout", function() {
        if ($(this).css("background-color") != "#ffff00") {
          $(this).css("background-color", "#ffffff");
        }
      }).bind("click", function() {
        $(evenTR).each(function() {
          if ($(this).css("background-color") == "#ffff00") {
            $(this).css("background-color", "#F0F8FF");
          }
        });
        $(oddTR).each(function() {
          if ($(this).css("background-color") == "#ffff00") {
            $(this).css("background-color", "#ffffff");
          }
        });
        $(this).css("background-color", "#ffff00");
      });
    });
  }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <table style="width: 100%;" cellpadding="0" cellspacing="0" id="tableThis">
    <tr id="header">
      <td>纳税人</td>
      <td>
         
        增值税</td>
      <td>
         
        消费税</td>
      <td>
         
        营业税</td>
        <td>小规模纳税人</td>
        <td>增值税小规模纳税人</td>
    </tr>
    <tr>
    <td class="style2">张三</td>
      <td class="style1">
        123423432.12</td>
      <td class="style1">
         
        32445345.13</td>
      <td class="style1">
         
        345564.25</td>
              <td class="style1">567657567.78</td>
        <td class="style1">3454353453.90</td>
    </tr>
    <tr>
    <td class="style2">李四</td>
      <td class="style1">
         
        34435345.34</td>
      <td class="style1">
         
        456546</td>
      <td class="style1">
         
        675675</td>
              <td class="style1">678879789</td>
        <td class="style1">34534534.0</td>
    </tr>
     <tr>
    <td class="style2">王五</td>
      <td class="style1">
         
        23424</td>
      <td class="style1">
         
        6546</td>
      <td class="style1">
         
        67868</td>
              <td class="style1">980890</td>
        <td class="style1">45345</td>
    </tr>
     <tr>
    <td class="style2">刘六</td>
      <td class="style1">
         
        234234</td>
      <td class="style1">
         
        123123</td>
      <td class="style1">
         
        324234</td>
              <td class="style1">342423</td>
        <td class="style1">345345</td>
    </tr>
     <tr>
    <td class="style2">赵七</td>
      <td class="style1">
         
        345345</td>
      <td class="style1">
         
        546546</td>
      <td class="style1">
         
        567567</td>
              <td class="style1">67867867</td>
        <td class="style1">67867</td>
    </tr>
     <tr>
    <td class="style2">王八</td>
      <td class="style1">
         
        345354</td>
      <td class="style1">
         
        345345</td>
      <td class="style1">
         
        5654</td>
              <td class="style1">567658678</td>
        <td class="style1">879879789</td>
    </tr>
     <tr>
    <td class="style2">李九</td>
      <td class="style1">
         
        34535</td>
      <td class="style1">
         
        4534</td>
      <td class="style1">
         
        756765</td>
              <td class="style1">867867</td>
        <td class="style1">897987987</td>
    </tr>
     <tr>
    <td class="style2">周十</td>
      <td class="style1">
         
        456434534</td>
      <td class="style1">
        546456 
      </td>
      <td class="style1">
         
        5675756</td>
              <td class="style1">67867867</td>
        <td class="style1">8797987</td>
    </tr>
     </table>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js里的prototype使用示例
Nov 19 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
javascript的几种写法总结
Sep 30 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
js实现碰撞检测
Jan 29 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 #Javascript
Bootstrap中data-target 到底是什么
Feb 14 #Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 #Javascript
如何快速上手Vuex
Feb 14 #Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 #Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
You might like
PHP 引用是个坏习惯
2010/03/12 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
Bootstrap精简教程
2015/11/27 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
财务管理专业毕业生求职信
2014/06/02 职场文书
在职员工证明书
2014/09/19 职场文书
先进员工事迹材料
2014/12/20 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
毕业实习感受与体会
2015/05/26 职场文书
广播体操比赛主持词
2015/06/29 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python