Javascript getElementsByClassName 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3349332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClassName not working
提问by new star
I coded a php page that displays information from a mysql database neatly into tables. I would like to hide empty table rows with an onLoad event handler.
我编写了一个 php 页面，该页面将 mysql 数据库中的信息整齐地显示到表中。我想用 onLoad 事件处理程序隐藏空表行。
Here is a sample table with code that hides a <td>when it has no content. but i can only get it to work with different IDs:
这是一个示例表，其中包含<td>在没有内容时隐藏 a 的代码。但我只能让它与不同的 ID 一起工作：
<script type="text/javascript">
function hideTd(id){
if(document.getElementById(id).textContent == ''){
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body onload="hideTd('1');hideTd('2');hideTd('3');">
<table border="1">
<tr>
<td id="1">not empty</td>
</tr>
<tr>
<td id="2"></td>
</tr>
<tr>
<td id="3"></td>
</tr>
</table>
</body>
what i want to do is use a class for the <td>s to achieve the same thing while only referencing the class once, and not referencing every single id that I want to remove, which will not even work for my dynamic content. I tried using this code:
我想要做的是为<td>s使用一个类来实现同样的事情，同时只引用该类一次，而不是引用我想要删除的每个 id，这甚至不适用于我的动态内容。我尝试使用此代码：
<script type="text/javascript">
function hideTd(){
if(document.getElementsByClassName().textContent == ''){
document.getElementsByClassName().style.display = 'none';
}
}
</script>
</head>
<body onload="hideTd('1');">
<table border="1">
<tr>
<td class="1">not empty</td>
</tr>
<tr>
<td class="1"></td>
</tr>
<tr>
<td class="1"></td>
</tr>
</table>
</body>
but it does not work. its supposed to hide the empty <td>s that have the specified class. how do i hide empty <td>s using classes, not IDs?
但它不起作用。它应该隐藏<td>具有指定类的空s。我如何<td>使用类而不是 ID隐藏空的s？
回答by Felix Kling
There are several issues:
有几个问题：
- Class names (and IDs) are not allowed to start with a digit.
- You have to pass a class to
getElementsByClassName(). - You have to iterate of the result set.
- 类名（和 ID）不允许以数字开头。
- 您必须将一个类传递给
getElementsByClassName(). - 您必须迭代结果集。
Example (untested):
示例（未经测试）：
<script type="text/javascript">
function hideTd(className){
var elements = document.getElementsByClassName(className);
for(var i = 0, length = elements.length; i < length; i++) {
if( elements[i].textContent == ''){
elements[i].style.display = 'none';
}
}
}
</script>
</head>
<body onload="hideTd('td');">
<table border="1">
<tr>
<td class="td">not empty</td>
</tr>
<tr>
<td class="td"></td>
</tr>
<tr>
<td class="td"></td>
</tr>
</table>
</body>
Note that getElementsByClassName()is not available up to and including IE8.
请注意，getElementsByClassName()在 IE8 之前（包括 IE8）不可用。
Update:
更新：
Alternatively you can give the table an ID and use:
或者，您可以为该表指定一个 ID 并使用：
var elements = document.getElementById('tableID').getElementsByTagName('td');
to get all tdelements.
获取所有td元素。
To hide the parent row, use the parentNodeproperty of the element:
要隐藏父行，请使用parentNode元素的属性：
elements[i].parentNode.style.display = "none";
回答by new star
If you want to do it by ClassName you could do:
如果你想通过 ClassName 来做，你可以这样做：
<script type="text/javascript">
function hideTd(className){
var elements;
if (document.getElementsByClassName)
{
elements = document.getElementsByClassName(className);
}
else
{
var elArray = [];
var tmp = document.getElementsByTagName(elements);
var regex = new RegExp("(^|\s)" + className+ "(\s|$)");
for ( var i = 0; i < tmp.length; i++ ) {
if ( regex.test(tmp[i].className) ) {
elArray.push(tmp[i]);
}
}
elements = elArray;
}
for(var i = 0, i < elements.length; i++) {
if( elements[i].textContent == ''){
elements[i].style.display = 'none';
}
}
}
</script>
