1

我试图隐藏在其中一个单元格中包含特定跨度元素的行。以下代码是我到目前为止所拥有的 - 但是 tr 没有 getElementsByTagName

我还能做些什么来获得这一行？谢谢 ！

<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>

container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');

for (var j = 0; j < items.length; j++) {
    spans = items.getElementsByTagName('span');
    for (var i=0; i<spans.length; i++) {
        if (spans.id == 'xyz') {
            items.display = 'none';
        }
    }
}
4

2 回答 2

1

所以让我们调试一下：

container = document.getElementById('tableContainer');
console.log(container)  //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection

for (var j = 0; j < items.length; j++) {
    spans = items.getElementsByTagName('span');  //<-- error says items.getElementsByTagName is not a function
    for (var i=0; i<spans.length; i++) {
        if (spans.id == 'xyz') {  //<--error here [not referencing index]
            items.display = 'none';  //<--error here [not setting style and index]
        }
    }
}

这里的问题是您没有为每个 tr 编制索引，而是试图在整个 html 集合上运行它。

spans = items.getElementsByTagName('span');

应该

spans = items[j].getElementsByTagName('span');

你需要在 spans 循环中做同样的事情，所以最终的代码是

container = document.getElementById('tableContainer');
console.log(container)  //<-- Gives you tag element
items = container.getElementsByTagName('tr');
console.log(items); //<-- Gives you HTML Collection

for (var j = 0; j < items.length; j++) {
    spans = items[j].getElementsByTagName('span');  //<-- use index
    items.getElementsByTagName is not a function
    for (var i=0; i<spans.length; i++) {
        console.log(spans[i].id)
        if (spans[i].id == 'xyz') {  //<-- use index
            items[j].style.display = 'none';  //<-- use index and display
        }
    }
}

运行示例：JSFiddle

于 2012-04-19T12:35:17.483 回答
1

spans并且items是节点数组，所以你忘了通过数组索引来获取每个节点，它应该是这样的，

<table id='tableContainer'>
<tr><td><span id='xyz'>Hide</span></td></tr>
<tr><td><span id='abc'>Show</span></td></tr>
</table>

container = document.getElementById('tableContainer');
items = container.getElementsByTagName('tr');

for (var j = 0; j < items.length; j++) {
    spans = items[j].getElementsByTagName('span');
    for (var i=0; i<spans.length; i++) {
        if (spans[i].id == 'xyz') {
            items[j].style.display = 'none';
        }
    }
}

演示

更新：

并且不要忘记放在style前面display。

items[j].display = 'none'; // false
items[j].style.display = 'none'; // true
于 2012-04-19T12:34:08.890 回答