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 解决方案不会存在所有这些问题。只是不考虑隐藏行。例如,看看这个隐藏美国队长的小提琴。