随笔 - 394 文章 - 0 评论 - 946 阅读 - 143万
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="width: 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>
posted on 2011-03-06 14:46 程序诗人阅读(671) 评论(0) 编辑收藏举报
刷新页面返回顶部
登录后才能查看或发表评论，立即登录或者逛逛博客园首页
公告

昵称：程序诗人
园龄： 16年2个月
荣誉：推荐博客
粉丝： 823
关注： 200
+加关注
Table表格的隔行变色，高亮选择当前行效果

公告

搜索

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜
