jQuery：Zebra条纹表

Question

我在页面上有两个表，我试图给它斑马条效果。它可以处罚款，但第二个table tr从第一张表中计算。因此，tr成为第一个tr。

我工作的例子 http://jsfiddle.net/A9wpe/1/

我正在使用的代码如下：

$('table tr:even:not(:first)').css('background-color','#ededed');

Answer 1

总是可以遍历每个表，独立地对每个表进行操作：

$('table').each(function(){$(this).find('tr:even').css('background-color','#ededed')});

或者，如果您的用户拥有最近的浏览器，您可以在CSS中执行此操作：

table tr:nth-child(even) {background-color: #ededed;}

Answer 2

不要为此使用jQuery。请改用CSS

DEMO

.subPro-data tr:nth-child(even){
    background-color : #ededed;
}

---

DEMO 使用jQuery for old IE

.subPro-data tr.even{
    background-color : #ededed;
}

和

$('.subPro-data tr:even').addClass('even');

---

要点是要避免像$('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)')这样的选择器。这是一个效率低下的噩梦，最终它只是因为你使用以下命令而变得如此复杂：.css('background-color','#ededed');

使用.css将这些样式添加到dom元素的内联style属性中。 http://www.w3schools.com/css/css_howto.asp内联样式几乎覆盖了所有css规则。你应该做的只是添加一个类。这样，背景颜色存在于css规则中，并且自然会位于css级联中的正确位置。

这也意味着你可以使用一个简单而健全的选择器，如$('.subPro-data tr:even')。

Answer 3

为这两个表提供 id 并使用下面的jQuery：

$('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)').css('background-color','#ededed');

将表 id 替换为{tableID1}和{tableID2}。请参阅JSFiddle example。

Answer 4

$('table').each(function(index, value) { $(value).find('tr:even:not(:first)').css('background-color','#ededed');});

Answer 5

您可以使用:not(:first)过滤行，然后应用nth-child(odd)规则。 检查DEMO here

$('table tr:not(:first):nth-child(odd)').css('background-color','#ededed');