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

2024-09-29 10:38:51

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

jQuery轻松实现表格的隔行变色和点击行变色的实例代码

jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!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> <m
JS与jQuery实现隔行变色的方法

本文实例讲述了JS与jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 传统的JS方法: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> windo
基于jQuey实现鼠标滑过变色(整行变色)

在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实现此种功能是一个不错的选择. 废话不多说了,直接给大家贴jquery代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="
jquery入门—选择器实现隔行变色实例代码

1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T
jquery实现效果比较好的table选中行颜色

jquery table选中行颜色(效果更好) 复制代码代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:
jQuery实现选中行变色效果(实例讲解)

//点击复选框添加样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <
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=
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
javascript实现table表格隔行变色的方法

本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高.接下来给大家分享两个小的特效,表格隔行变色和Tab标签页,大家来体会一下. 表格隔行变色效果图: 原生Js实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta c
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

废话不多说了,直接给大家贴代码了,具体代码如下所示: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head>  <link rel="stylesheet" type="text/css" href=&quo
原生JS操作网页给p元素添加onclick事件及表格隔行变色

1. 给网页中的所有p元素添加onclick事件: 复制代码代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.
javascript表格隔行变色加鼠标移入移出及点击效果的方法

本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现
JS实现表格隔行变色

本文实例为大家分享了JS实现表格隔行变色的具体代码,供大家参考,具体内容如下用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(thead 里面的行)不需要变换颜色,改变的是 tbody 里面的行. 1.获取元素,获取的是 tbody里面的行. 2.循环注册绑定事件,将 tbody 里面全部的行都得到,然后全部都注册鼠标经过和离开事件. 3.所有行绑定
jQuery实现table表格checkbox全选的方法分析

本文实例讲述了jQuery实现table表格checkbox全选的方法.分享给大家供大家参考,具体如下: 今天在页面中使用jQuery实现了全选框操作,如图: 具体的实现过程很简单: 第一步设计一个简单的表格: 设置表格列标题,在列标题中的单选框为全选框: 设置表格题,表格题的单选框就是普通的单选框啦: <table> <thead> <tr> <td> <input type="checkbox" onclick="s
jQuery实现table表格信息的展开和缩小功能示例

本文实例讲述了jQuery实现table表格信息的展开和缩小功能.分享给大家供大家参考,具体如下: <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+re

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

相关推荐

随机推荐