`

使用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();
}

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics