zoukankan html css js c++ java
Table表格的隔行变色，高亮选择当前行效果

最近客户要求高亮选择列表的功能，于是顺便做了个，作为记录。
前台代码：
View Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <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="stylesheet" type="text/css" />
    <script src="JS/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=" 100%;" cellpadding="0" cellspacing="0" id="tableThis">
        <tr id="header">
            <td>纳税人</td>
            <td>
                &nbsp;
                增值税</td>
            <td>
                &nbsp;
                消费税</td>
            <td>
                &nbsp;
                营业税</td>
                <td>小规模纳税人</td>
                <td>增值税小规模纳税人</td>
        </tr>
        <tr>
        <td class="style2">张三</td>
            <td class="style1">
                123423432.12</td>
            <td class="style1">
                &nbsp;
                32445345.13</td>
            <td class="style1">
                &nbsp;
                345564.25</td>
                            <td class="style1">567657567.78</td>
                <td class="style1">3454353453.90</td>
        </tr>
        <tr>
        <td class="style2">李四</td>
            <td class="style1">
                &nbsp;
                34435345.34</td>
            <td class="style1">
                &nbsp;
                456546</td>
            <td class="style1">
                &nbsp;
                675675</td>
                            <td class="style1">678879789</td>
                <td class="style1">34534534.0</td>
        </tr>
         <tr>
        <td class="style2">王五</td>
            <td class="style1">
                &nbsp;
                23424</td>
            <td class="style1">
                &nbsp;
                6546</td>
            <td class="style1">
                &nbsp;
                67868</td>
                            <td class="style1">980890</td>
                <td class="style1">45345</td>
        </tr>
         <tr>
        <td class="style2">刘六</td>
            <td class="style1">
                &nbsp;
                234234</td>
            <td class="style1">
                &nbsp;
                123123</td>
            <td class="style1">
                &nbsp;
                324234</td>
                            <td class="style1">342423</td>
                <td class="style1">345345</td>
        </tr>
         <tr>
        <td class="style2">赵七</td>
            <td class="style1">
                &nbsp;
                345345</td>
            <td class="style1">
                &nbsp;
                546546</td>
            <td class="style1">
                &nbsp;
                567567</td>
                            <td class="style1">67867867</td>
                <td class="style1">67867</td>
        </tr>
         <tr>
        <td class="style2">王八</td>
            <td class="style1">
                &nbsp;
                345354</td>
            <td class="style1">
                &nbsp;
                345345</td>
            <td class="style1">
                &nbsp;
                5654</td>
                            <td class="style1">567658678</td>
                <td class="style1">879879789</td>
        </tr>
         <tr>
        <td class="style2">李九</td>
            <td class="style1">
                &nbsp;
                34535</td>
            <td class="style1">
                &nbsp;
                4534</td>
            <td class="style1">
                &nbsp;
                756765</td>
                            <td class="style1">867867</td>
                <td class="style1">897987987</td>
        </tr>
         <tr>
        <td class="style2">周十</td>
            <td class="style1">
                &nbsp;
                456434534</td>
            <td class="style1">
                546456&nbsp;
            </td>
            <td class="style1">
                &nbsp;
                5675756</td>
                            <td class="style1">67867867</td>
                <td class="style1">8797987</td>
        </tr>
         </table>
    </form>
</body>
</html>
查看全文
相关阅读:
Java实验项目二——打印某年某月日历
 Java实验项目二——猜数游戏
 C语言用面向对象的思想写贪吃蛇
 各操作系统系统快捷键（更新）
深入学习 memset 函数
 PHP开发环境搭建及开发工具
 Zepto v1.0-1源码注解
 Nginx 反向代理配置
 nginx 安装
 JQ实现右下角scrollTop()事件
原文地址：https://www.cnblogs.com/scy251147/p/1972284.html