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

Answer 2

根据Barmar。

$(document).ready(function(){
    var x=document.getElementsByTagName('th');  
    for(var i = 0; i < x.length; i++){  
         x[i].style.display ='none';  
    }   
});

演示：

http://jsfiddle.net/patelriki13/r5Ua5/

使用JavaScript隐藏元素

2 个答案: