new*_*tar 13 javascript webforms html-table dynamic-data
我编写了一个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>具有指定类的空s.我如何<td>使用类隐藏空s,而不是ID？
Fel*_*ing 37
有几个问题:
getElementsByClassName().示例(未经测试):
<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() IE8之前不可用.
更新:
或者,您可以为表提供ID并使用:
var elements = document.getElementById('tableID').getElementsByTagName('td');
获得所有td元素.
要隐藏父行,请使用parentNode元素的属性:
elements[i].parentNode.style.display = "none";
| 归档时间： |
|
| 查看次数： |
109278 次 |
| 最近记录： |