条带化表格:Chrome / Safari中tr:nth-​​child td的错误

时间:2011-11-27 20:23:38

标签: javascript jquery html-table

我正在尝试使用JavaScript根据行在表和值中的位置对行中的表格单元格进行条带化,因此我想使用tr:nth-child(i) td仅抓取单元格(忽略th)。 ..

这是一个显示问题的小提琴(错误?)我发现:http://jsfiddle.net/redroot/pBe94/。你可能会看到我在表格主体的前四行中删除了td个元素。在Chrome和Safari中,只在第2行和第3行中找到第一个单元格,而如果我先找到该行,则使用find("td")它可以正常工作,如第4行所示。

起初我认为这是我的标记,但看起来很好,它在Firefox中运行良好。所以我有点难过,任何帮助都会受到赞赏!

(在我的测试中,document.querySelectorAll会出现这种情况,仅限Chrome和Safari。)

1 个答案:

答案 0 :(得分:3)

是的,似乎确实存在一些WebKit错误。我之前也经历过here这个问题,但这个错误还没有明确修复。

要做的一件事是强制Sizzle进行选择而不是原生的WebKit引擎:

$.expr[":"].dummy = function() {
    return true;
};

然后你可以使用:

$("#rows tbody tr:nth-child(1) td:dummy").css("background-color","#e0e0e0");

由于:dummy本身不可用,jQuery将使用Sizzle(其自定义选择库)。采用这种非本地方式虽然是(一如既往)性能损失。

http://jsfiddle.net/pBe94/2/