Question

我试图在一个单元格中隐藏一个特定span元素的行。以下代码是我目前所拥有的 - 但是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';
        }
    }
}

Answer 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';
        }
    }
}

DEMO

<强>更新

不要忘记将style放在display之前。

items[j].display = 'none'; // false
items[j].style.display = 'none'; // true

Answer 2

所以让我们调试一下：

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

为包含跨度的单元格隐藏表格行

2 个答案: