使用 jQuery 制作奇偶列双色 GridView

摘自：http://doc.chinaunix.net/sqlserver/200804/160567.shtml

jQuery 是一个非常精巧的 JavaScript Library，目前的版本为 1.2.2，函式库经 Gzip压缩后只有15K 左右。它能够很轻易的操作 HTML Document，处理页面的事件、动作，也可轻易实现 AJAX 效果。jQuery 的使命就是改变你今后的 JavaScript 编写方式，第一次看到它的精简 JavaScript 程序代码就会被它深深的吸引。
  为了让大家感受 jQuery 的魔力，我们以 jQuery 来制作双色数据列的 GridView，并在鼠标移动时改变所在的数据列颜色，你会发现它竟然短短几行程序代码就能达成这个效果。
  首先引用 jQuery 函式库，它只是一个 js 档案。

<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>

  执行结果