getElementsByClassName不工作
getElementsByClassName不工作
提问于 2010-07-28 09:48:00
我编写了一个php页面，将mysql数据库中的信息整齐地显示到表格中。我想用onLoad事件处理程序隐藏空的表行。
下面是一个示例表，其中包含当<td>没有内容时隐藏它的代码。但我只能让它使用不同的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>我想要做的是为<td>使用一个类来实现相同的功能，同时只引用一次这个类，而不是引用我想要删除的每个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>但它不起作用。它应该隐藏具有指定类的空<td>。如何使用类而不是ID来隐藏空的<td>？
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-07-28 09:52:08
有几个问题：
必须将类传递给getElementsByClassName().
- You才能迭代结果集，
- 类名(和ID)都是
- 。
示例(未测试)：
<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>请注意getElementsByClassName() is not available up to and including IE8。
更新：
或者，您可以为表提供一个ID并使用：
var elements = document.getElementById('tableID').getElementsByTagName('td');来获取所有的td元素。
要隐藏父行，请使用元素的parentNode属性：
elements[i].parentNode.style.display = "none";Stack Overflow用户
发布于 2010-07-28 19:19:01
如果你想通过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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3349332
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号