表格的替代颜色 css 不适用

Alternate color css for table not apply

本文关键字：css 不适用 颜色 表格      更新时间：2023-09-26
 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，我让它在我的代码中工作，但不能在这个小提琴上工作。它不会显示在选项卡 2 上(反之亦然(。我的问题是如何在同时位于不同选项卡中的两个表上应用Foo()。

例如，请参阅此小提琴。任何帮助都非常感谢。

理想的解决方案：CSS

删除所有Javascript并用这个替换CSS怎么样：

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

小提琴

有关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";
     }
 }

小提琴

Javascript 中需要解决的其他问题

我删除了:not(:hidden)部分，因为这是阻止此代码适用于第二个选项卡表的(另一个(问题。如果因为希望能够显示或隐藏行而需要此功能，则必须考虑以下几点：

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

法典：

 $(function () {
   Foo("searchMe1"); // This first
   Foo("searchMe2");
   $("#tabs").tabs(); // Then this.
  • 如果要动态隐藏行，则会遇到另一个问题。它会弄乱你的颜色。每次重新申请课程时，您都必须调用Foo。这也意味着Foo也需要删除以前分配的类，否则您将同时拥有两者。这可能需要一些工作。:)

请注意，CSS 解决方案不会存在所有这些问题。只是不考虑隐藏行。例如，看看这个隐藏美国队长的小提琴。

相关文章：