Table 隔行换色效果代码

阅读更多

CSS代码

.stripe { border-width: 1px; border-style: inset; border-color: gray; background-color: white; } .stripe tr, .stripe tr td { border-width: 1px; border-style: inset; border-color: gray; background: white; /*#F5F5F5;*/ } tr.alt, tr.alt td { border-width: 1px; border-style: inset; border-color: gray; background: #E3EDF4; /*#E8F3FD;*/ /*给Table的偶数行加上背景色*/ } tr.over, tr.over td { border-width: 1px; border-style: inset; border-color: gray; background: #bcd4ec; /*鼠标高亮行的背景色*/ }

 

JS代码

$(".stripe tr").mouseover(function() { $(this).addClass("over"); }) .mouseout(function() { $(this).removeClass("over"); }); $(".stripe tr:even").addClass("alt");

版权声明：本文为博主原创文章，未经博主允许不得转载。