Question

我的网站上有一张桌子，我正试图用jquery来设置它。我正在使用的代码与普通表工作正常，但如果在列中合并两个单元格则会破坏该样式。我想要一列着色，一列空白

jquery代码

    $( document ).ready(function() {
    $('#tab-table').find("table").addClass('s-table');
    $(".s-table tr td:nth-child(2n+1)").css("background-color","#d1deec");
});

link to fiddle

Answer 1

如果使用正确的标记，CSS可以帮助您绘制冒号背景颜色：

<colgroup>
<col/>
<col/>
</colgroup>

然后基本适用：

col {background:#789 url(image.png);}

col中的背景和单元格中的rgba颜色混合可以为您提供：http://codepen.io/gc-nomade/pen/ybDhH/

否则，如果您没有动手标记，请欺骗它并从标题单元格中进行操作。您可以使用标题单元格中的box-shadow或pseudo-element以及overflow上的table使用一些技巧。 Pseudo-element技术： http://codepen.io/gc-nomade/pen/dDwmf

和 box-shadow技术： http://codepen.io/gc-nomade/pen/xqALu

Answer 2

我使用循环（如果合并的单元格将始终保持不变..

看小提琴： http://jsfiddle.net/jFIT/k5yZ9/4/

$("table tr:not(:first)").each(function() {
 if($(this).find('td').length == 7)
 {
    //can replace with array 2/4/6
   $(this).find('td:nth-child(2)').css("background-color","#d1deec");
 }
 else   
 {
    // 3/5/7
$(this).find('td:nth-child(3)').css("background-color","#d1deec");
 }
 //loop array
});

<强>更新

http://jsfiddle.net/jFIT/k5yZ9/6/

使用数组：

$("table tr:not(:first)").each(function () {
 var arr = [];
 var $this = $(this);
 if ($(this).find('td').length == 7) {
     arr.push(2, 4, 6);
 } else {
     arr.push(3, 5, 7);
 }
 $.each(arr, function (ind, val) {
     $this.find('td:nth-child(' + val + ')').css("background-color", "#d1deec");
 });
});

使用jquery的表列样式

2 个答案: