javascript - 使用 JavaScript 隐藏 <th> 元素

Question

我尝试通过 JavaScript 隐藏一些表格元素
对于 <td>元素没问题:

function hide(){  
    var x=document.getElementsByTagName('td');  
    for(var i in x){  
        x[i].style.visibility='hidden';  
    }  
}  

但是当我对<th>做同样的事情时元素不行

function hide(){  
    var x=document.getElementsByTagName('th');  
    for(var i in x){  
        x[i].style.visibility='hidden';  
    }  
}  

有人请告诉我为什么吗？我该如何管理？

这是我的 HTML

<table>  
    <thead>  
        <tr>  
            <th>header 1</th>  
            <th>header 2</th>  
            <th>header 3</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>content 1.1</td>  
            <td>content 1.2</td>  
            <td>content 1.3</td>  
        </tr>  
        <tr>  
            <td>content 2.1</td>  
            <td>content 2.2</td>  
            <td>content 2.3</td>  
        </tr>  
    </tbody>  

有一件奇怪的事 当我这样做时

function hide(){  
    var x=document.getElementsByTagName('td');  
    for(var i in x){  
        x[i].style.visibility='hidden';  
    }  
    var y=document.getElementsByTagName('th');  
    for(var i in y){  
        y[i].style.visibility='hidden';  
    }  
}  

该功能无法正常工作，只是元素隐藏，但仍然可见。

但是当我分成两个函数时，它可以正常工作。

我正在使用 Chrome。
为什么会发生这种情况？

Answer 1

不要使用for-in来迭代NodeList。 NodeList 对象具有不是列表元素的属性。当 i 为 "length" 时，会出现错误，因为 x["length"] 没有 style 属性。

function hide(){  
    var x=document.getElementsByTagName('th');  
    for(var i = 0; i < x.length; i++){  
        x[i].style.visibility='hidden';  
    }  
}

FIDDLE