2

我正在尝试制作一个在多个表中交替显示每一行颜色的 JavaScript。问题是有些表根本不会改变。所以，我正在尝试使用此代码来获取表的行：

function alternateRows(myTable)
  var rows = document.getElementsByTagName("table").getElementsByClassName(myTable).getElementsByTagName("tr");

并且，在 HTML 中：

<body onload="alternateRows('myTable')";>
  <table class="myTable">

如果我使用 id 属性并将 JavaScript 更改为：

var rows = document.getElementById(myTable).getElementsByTagName("tr");

任何建议都会很棒。谢谢！

4

4 回答 4

2

getElementsByTagName返回一个NodeList，这就是为什么它调用 getElements 而不是 getElement。NodeList 没有定义“getElementsByClassName”方法，这是您应该看到的错误。

您需要使用循环。还知道您可以为此使用 CSS 选择器，所有现代浏览器都支持这一点，除了 IE 8 和更低版本。

适用于现代浏览器的 CSS（或 IE8-，例如带有帮助程序库，如ie9.js）

table.mytable tr:nth-child(odd) {
    background-color: black;
}
table.mytable tr:nth-child(even) {
    background-color: white;
}
于 2013-03-22T08:23:29.207 回答
2

有两种 DOM 方法：

  1. 返回对单个节点的引用的方法。例如getElementById和querySelector。

  2. 返回节点列表的方法。例如，getElementsByTagName，getElementsByClassName，querySelectorAll。

那些返回节点列表的方法通常会返回一个NodeList [MDN]对象，它的接口非常有限。你所能做的就是访问列表中的单个元素，就像数组一样，它没有与DOM 节点（或元素）相同的接口。

如果您想在列表中的元素上调用更多的 DOM 方法或 DOM 属性，您可以使用其索引直接访问特定节点，或者遍历列表并为每个元素执行此操作：

var elements = document.getElementsByTagName('div');

for(var i = 0, l = elements.length; i < l; i++) {
    // do something with elements[i]
}

请注意，NodeLists 通常是live，这意味着对 DOM 的任何更改（例如删除div元素）都会自动更新列表。

在您的特定情况下，您必须选择：

  1. 用于querySelectorAll选择所有行：

    var rows = document.querySelectorAll('table.' + myTable + '  tr');

  2. 或迭代选定的元素：

    var rows = [];
var tables  = document.getElementsByTagName("table");
for (var i = 0, l = tables.length; i < l; i++) {
    // check whether it is a table with class in the variable `myTable`
    if ((' ' + tables[i].className + ' ').indexOf(' ' + myTable + ' ') > -1) {
        rows = rows.concat(tables[i].getElementsByTagName('tr'));
    }
}

    您可以直接使用而不是通过标签名称选择元素然后测试它们的类，getElementsByClassName但它不像querySelectorAll.

于 2013-03-22T08:26:11.400 回答
0

试试这个：

您只能按getElementsByTagName或按getElementsByClassName 赞使用：

var rows = document.getElementsByTagName("table")[0].getElementsByTagName("tr");

或者

var rows = document.getElementsByClassName('myTable')[0].getElementsByTagName("tr");

或使用querySelectorAll

句法：

var matches = document.querySelectorAll("div.note, div.alert");

在您的示例中：

var rows = document.querySelectorAll("table."+myTable).getElementsByTagName("tr");

getElementsByTagName给出数组，所以你应该将它与zero index Same for一起使用getElementsByClassName

阅读https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName 和 https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

于 2013-03-22T08:24:43.350 回答
0

如果必须以相同的方式修改所有表，则可以使用以下代码：

var tables = document.getElementByTagName("table");
for (var i in tables)
{
    var rows = tables[i].getElementByTagName("tr");
    //Alternating code here
}
于 2013-03-22T08:29:42.543 回答