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");

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