日期:2014-05-16  浏览次数:20479 次

使用js 给表格奇偶行添加背景颜色

效果图:

<table>

<tbody>

<tr>

<td colspan="3">1</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td colspan="3">2</td>

<td>21</td>

<td>22</td>

</tr>

<tbody>

</table>

?如果给这样的跨行表格添加背景颜色 不能整行的添加 不然会有点难。下面是我实现的

function changeColor_s(){
?if($(".tab_new tr").length>1){
??????? $(".tab_new tr").each(function(){
??????? ?var num=$(this).children("td").length;
?????????if(num==7){
??????? ??$(this).children("td").eq(0).css("background","#FFF");
??????? ?}
??????? })
??? }
}
$(function() {
?changeColor();
? $(".tab_new tr").hover(function() {
???$(this).css("background", "#E1F1FB").css("cursor", "auto");
???changeColor_s();
??},function(){
???changeColor();
?});
});
function changeColor(){
? $(".tab_new").each(function () {
?? ? var _this = $(this);
?? ? //奇数行
?? ? _this.find("tr:even").css("background", "#fff").css("cursor", "auto");
?? ? //偶数
? _this.find("tr:odd").css("background", "#F5F9FB").css("cursor", "auto");
?? });
? changeColor_s();
}