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>

查看全文

相关阅读:
快讯：优酷四季度净盈余570万美元
 陈诉称谷歌Apps受大企业欢迎或对微软构成要挟
 Bus.fm：有颜色的“巴士电台”
摩根大通预计全球PC市场疲软中国为主因
 中国联通首批沃Phone终端将于3月上市销售
 酷派将推800元Android智好手机推行3G终端
 谷歌预计将来几年在线告白局限打破1000亿美元
 Facebook与日本电通协作展开告白营销业务
 动静称苹果2日将推出小企业手艺支撑办事
 C# 调用C++生成的dll

原文地址：https://www.cnblogs.com/scy251147/p/1972284.html