代码如下：

JQuery实现隔行换色-www.

/*注意选择器的层叠关系*/
.stripe_tb th {
background:#B5CBE6;
color:#003399;
line-height:20px;
height:30px;
}
.stripe_tb td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
.stripe_tb td * {
padding:6px 11px;
}
.stripe_tb tr.alt td {
background:#ecf6fc; /*为所有偶数行加上背景色*/
}
.stripe_tb tr.over td {
background:#FEF3D1; /*鼠标高亮行的背景色*/
}



$(document).ready(function(){
  $(".stripe_tb tr").mouseover(function(){
   //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数
      $(this).addClass("over");}).mouseout(function(){
        //给这行添加class值为over，并且当鼠标一出该行时执行函数
            $(this).removeClass("over");}) //移除该行的class
      $(".stripe_tb tr:even").addClass("alt");
//给class为stripe_tb的表格的偶数行添加class值为alt
});



  
  
  
  
  姓名
  年龄
  所在城市
  
  
  
  
  AA
  23
  北京
  
  
  BB
  22
  上海
  
  
  CC
  24
  广州
  
  
  DD
  25
  深圳
  
  

效果如下图所示：

经过以上的隔行变色处理，整个的表格显示清晰直观，数据也更容易识别了。
值得收藏的好代码。

您可能感兴趣的文章: