使用 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/