Question

 function Foo(id) {
         if (document.getElementByTagName) {
             var $rows = $('#' + id + ' tr : not(:hidden)');
             for (var i = 0; i < $rows.length; i++) {
                 if (i % 2 == 0)

                 $rows[i].className = "even";
                 else $rows[i].className = "odd";
             }
         }

     }

这是我的功能，我让它在我的代码中工作但不在这个小提琴上，如果我能够在选项卡1中应用Foo method它将不会显示在tab2上（反之亦然）。我的问题是如何在同时驻留在不同标签中的两个表上应用Foo()。

例如，请参阅此FIDDLE。非常感谢任何帮助。

Answer 1

理想解决方案：CSS

如何删除所有Javascript并用此替换CSS：

tr:nth-child(even) {
    background-color : gray;
}
tr:nth-child(odd) {
    background-color : white;
}

FIDDLE

有关nth-child的强大功能的更多信息，请访问CSS-Tricks。请注意，此解决方案在IE8中不起作用，但我个人认为这是可以接受的。毕竟它只是一种化妆品辅助工具，这种旧浏览器的用户可以在没有它的情况下使用您的网站，也可以升级他们的浏览器。

修复您的Javascript

顺便提一下，你的Javascript解决方案也可以运行，但它有一些错误。首先if (document.getElementByTagName)只检查函数getElementByTagName是否存在，而我认为你计划执行它以获取表或行。

它的效果更好：

 function Foo(id) {
     var $rows = $('#' + id + ' tr');
     for (var i = 0; i < $rows.length; i++) {
         if (i % 2 == 0)
             $rows[i].className = "even";
         else $rows[i].className = "odd";
     }
 }

FIDDLE

在Javascript中需要解决的其他问题

我删除了:not(:hidden)部分，因为这是另一个问题，导致此代码无法用于第二个标签页。如果您需要这个，因为您希望能够显示或隐藏行，则必须考虑以下几点：

该选择器中不应有空格，否则您将选择单元格，结果将是棋盘格外观，因此它应为tr:not(:hidden)。
如果要对单元格进行着色，则它不会对第二个选项卡起作用，因为在您调用Foo时该选项卡会被隐藏。要解决此问题，您可以撤消对Foo和$.tabs的来电。这样，当您致电Foo时，所有标签页仍然可见。

代码：

 $(function () {
   Foo("searchMe1"); // This first
   Foo("searchMe2");
   $("#tabs").tabs(); // Then this.

如果您要动态隐藏行，则会遇到另一个问题。它会弄乱你的着色。每次重新应用类时都必须调用Foo。这也意味着Foo也需要删除以前分配的类，否则你将同时拥有这两个类。这可能需要一些工作。：）

请注意，CSS解决方案不会存在所有这些问题。隐藏的行不会被考虑在内。例如，参见THIS FIDDLE，其中隐藏着美国队长。

表格的替代颜色css不适用

1 个答案: