使用 jQuery 制作奇偶列双色 GridView

jQuery 是一个非常精巧的 JavaScript Library，目前的版本为 1.2.2，函式库经 Gzip压缩后只有15K 左右。它能够很轻易的操作 HTML Document，处理页面的事件、动作，也可轻易实现 AJAX 效果。jQuery 的使命就是改变你今后的 JavaScript 编写方式，第一次看到它的精简 JavaScript 程序代码就会被它深深的吸引。

为了让大家感受 jQuery 的魔力，我们以 jQuery 来制作双色数据列的 GridView，并在鼠标移动时改变所在的数据列颜色，你会发现它竟然短短几行程序代码就能达成这个效果。

首先引用 jQuery 函式库，它只是一个 js 档案，可由 http://jquery.com/ 下载。

<script src="js/jquery.js" type="text/javascript"></script>

然后在 style 加入下列的样式

    <style type="text/css">
    th {
        background:#D9EBFF;
        color:#0033CC;
        line-height:20px;
        height:20px;
    }

    td {
        padding:3px 6px;
        vertical-align:top;
        text-align:center;
        color:#333311;
    }

    td * {
        padding:6px 11px;
    }

    tr.even {
        background:#F5F5F5;
    }

    tr.odd {
        background:#FFFFFF;
    }

    tr.over td {
        background:#CDE6FF;
        color:#000000;
    }

    .tr_chouse td {
        color:#FFF;
        background:#6AB1FF;
    }
    </style>

再来就是撰写 jQuery 的程序代码，下列几行短短的程序代码执行我们要的效果。若 GridView 控件要套用这个效果，只要它的 CssClass="gridview" 就可以。

1     <script type="text/javascript">
2     $(document).ready(function(){
3         $(".gridview tr:odd").addClass("odd");     //奇数行设定为 "odd" 样式
4         $(".gridview tr:even").addClass("even");   //偶数行设定为 "even" 样式
5         $(".gridview tr").mouseover(function(){$(this).addClass("over");})     //当 mouseover 时加入 "over" 样式
6                          .mouseout(function(){$(this).removeClass("over");})   //当 mouseout 时移除 "over" 样式
7                          .click(function(){$(this).toggleClass("tr_chouse");}) //当 click 加入或移除 "tr_chouse" 样式，实现数据列选取
8     });
9     </script>

执行结果
 

参考来源： http://15daysofjquery.com/examples/zebra/