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

相关资源：jquery 双色表格实现代码