切换仅显示和隐藏某些表行
我试图仅显示/隐藏（通过切换机制）表中的某些行。我已经有点接近了，代码如下。我在其他有关此问题的问题中读到的是样式 id 的使用，我已经尝试过，但对我来说失败了。这就是为什么我使用“hide=yes”并将其传递到切换函数中。
这将是一个包含数百个条目的表，当我单击“切换”时，这些条目在任何一天都可以减少到不到 30 个。
有更好的方法吗？
<html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('hide');">TOGGLE</span><br /><br />
<table>
<tr ><td >display this row 1</td></tr>
<tr hide=yes ><td>hide this row 1</td></tr>
<tr><td>display this row 2</td></tr>
<tr hide=yes ><td>hide this row 2</td></tr>
<tr hide=yes ><td>hide this row 3</td></tr>
<tr><td>display this row 3</td></tr>
<tr><td>display this row 4</td></tr>
<tr><td>display this row 5</td></tr>
<tr><td>display this row 6</td></tr>
<tr hide=yes ><td>hide this row 4</td></tr>
<tr hide=yes ><td>hide this row 5</td></tr>
<tr><td>display this row 7</td></tr>
<tr hide=yes ><td>hide this row 6</td></tr>
<tr hide=yes ><td>hide this row 7</td></tr>
</table>
</body>
</html>
I am trying to show/hide (via a toggle mechanism) only certain rows in my table. I have gotten somewhat close, code is below. What I was reading about in other questions regarding this is the use of style id's and I have tried that but it fails for me. So that is why I used 'hide=yes' and pass that into the toggle function.
This is going to be a table with a couple of hundred entries that when I click toggle can be reduce down to less than 30 on any given day.
Is there a better way to do this?
<html>
<head>
<script>
function toggle(thisname) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(thisname)){
if ( tr[i].style.display=='none' ){
tr[i].style.display = '';
}
else {
tr[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<span onClick="toggle('hide');">TOGGLE</span><br /><br />
<table>
<tr ><td >display this row 1</td></tr>
<tr hide=yes ><td>hide this row 1</td></tr>
<tr><td>display this row 2</td></tr>
<tr hide=yes ><td>hide this row 2</td></tr>
<tr hide=yes ><td>hide this row 3</td></tr>
<tr><td>display this row 3</td></tr>
<tr><td>display this row 4</td></tr>
<tr><td>display this row 5</td></tr>
<tr><td>display this row 6</td></tr>
<tr hide=yes ><td>hide this row 4</td></tr>
<tr hide=yes ><td>hide this row 5</td></tr>
<tr><td>display this row 7</td></tr>
<tr hide=yes ><td>hide this row 6</td></tr>
<tr hide=yes ><td>hide this row 7</td></tr>
</table>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的方法似乎没问题，我建议你交替声明变量
tr和i你可以使用
class代替Your approach seems ok, i suggest you declare variables
trandialternately you could use
classinstead