jQuery双色表格的实现

效果：

 

代码：

<! 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 >
< title >  jquery  </ title >
< script  type ="text/javascript"  src ="jquery.js" ></ script >
</ head >
< body >
< script  type ="text/javascript" >
$(document).ready(function(){
     //jQuery ready is quicker than onload
     $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
     $(".stripeMe tr:even").addClass("alt");
});
</ script >
< style  type ="text/css" >
table.sample {}{
     border-collapse: collapse;
     width: 50%;
     margin: 24px;
     font-size: 1.1em;
}
table.sample th {}{
     background: #3e83c9;
     color: #fff;
     font-weight: bold;
     padding: 2px 11px;
     text-align: left;
     border-right: 1px solid #fff;
     line-height: 1.2;
}
table.sample td {}{
     padding: 6px 11px;
     border-bottom: 1px solid #95bce2;
     vertical-align: top;
}
table.sample td * {}{
     padding: 6px 11px;
}
table.sample tr.alt td {}{
     background: #ecf6fc;
}
table.sample tr.over td {}{
     background: #bcd4ec;
}
</ style >
< table  class ="stripeMe sample" >
      < thead >
          < tr >
              < th > Lorem </ th >
              < th > Ipsum </ th >
              < th > Dolor </ th >
              < th > Sit </ th >
              < th > Amet </ th >
          </ tr >
      </ thead >
      < tbody >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
          < tr >
              < td > Lorem </ td >
              < td > Ipsum </ td >
              < td > Dolor </ td >
              < td > Sit </ td >
              < td > Amet </ td >
          </ tr >
      </ tbody >
</ table >
</ body >
</ html >

 

最近在支付宝UED读到一个比较有启示的文章，增补上来：符合WEB标准的表格行滑过高亮效果

转载于:https://www.cnblogs.com/color-fever/archive/2008/10/13/1310211.html