隐藏包含范围的单元格的表格行

Question

我试图隐藏其中一个单元格中包含特定span元素的行。下面的代码是我目前为止的内容 - 但是没有getElementsByTagName for tr

我还能做些什么来获取行？谢谢 ！

<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

UPDATE：

别忘了在之前加。

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'); 

你需要做同样的事情在跨度循环，使最终代码会

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