使用 jQuery 对各种表格中的单元格选择进行统一格式设置答案

【问题标题】：Uniform formatting of a selection of cells in various tables with jQuery使用 jQuery 对各种表格中的单元格选择进行统一格式设置
【发布时间】：2012-03-30 06:30:54
【问题描述】：

我有一个包含多个表格的页面，我想设置每个表格的格式，以便每一行的第二个单元格具有特定的背景颜色。我已经按照这个问题的初始版本的答案中的建议尝试了以下 jQuery 代码：

   $('table tr:odd td:nth-child(2)').css("background-color", "#F6F3EE");

只要所有表的行数都是偶数，这就能正常工作。如果不是这种情况，则格式会被反转，就好像 jQuery 将 s 视为单个表的一部分，并且不会在每个表中重新启动计数器。

这里有一个 js fiddle 的链接来说明问题：

http://jsfiddle.net/davidThomas/eAHUF/

【问题讨论】：

标签： jquery html-table formatting jquery-selectors

【解决方案1】：

您只选择第一个 td 元素，它是 tr.reg:even 行的后代。

尝试使用:nth-child() 替代方案：

$('table tr:odd td:nth-child(2)').css('background-color','#ffa');

JS Fiddle demo.

注意：您必须记住 CSS :nth-child() 是从 1 开始的，而不是从 0 开始的（就像 JavaScript 那样）。

编辑以回应 OP 的评论，如下：

...但它给我带来了一个问题。我已经编辑了您的 jsfiddle 演示以在第一个表中添加一行，从而为其提供了奇数行数。现在第二个表的行被反向突出显示，这不是我想要的。你有解决这个问题的方法吗？

是的，我...错过了明显的（不知何故）。我修改了上面的代码，依次查看每个table，然后查找:odd 行和nth-child()：

$('table').find('tr:odd td:nth-child(2)').css('background-color','#ffa');

JS Fiddle demo.

参考资料：

【讨论】：

@David-thomas 您的回答起初看起来是正确的，但它给我带来了一个问题。我已经编辑了您的 jsfiddle 演示以在第一个表中添加一行，从而为其提供了奇数行数。现在第二个表的行被反向突出显示，这不是我想要的。你有解决办法吗？
我已经编辑并更正了答案。抱歉，我不知道为什么我没有注意到以前的缺陷... =/

【解决方案2】：

试试这个：

$('table tr.reg:even td:eq(1)').each(function(index) {
    $(this).css("background-color", "#F4F4F8");
});

【讨论】：

为什么使用each()？这是不必要的，因为css() 将作用于数组返回的所有元素，each() 仅当您需要迭代元素以根据它们的索引或内容对它们执行不同的操作时才需要...跨度>

【解决方案3】：

最简单的解决方案就是：

$("table tr:even td:nth-child(2)").css("background-color", "#F4F4F8");

你可以在这里看到它的实际效果：http://jsfiddle.net/rowanmanning/pBCkj/

【讨论】：