切换显示和隐藏只有一些表行

我想显示/隐藏（通过切换机制）我的表中只有特定的行。我已经有点接近了，代码在下面。我在关于这个问题的其他问题上正在阅读的是风格标识的使用，我已经尝试过，但是对于我来说却失败了。所以这就是为什么我使用'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>

来源

2011-11-19 ONDEV

你的方法看起来不错，但我建议你声明变量tr和i

交替，你可以使用class代替

<span onclick="toggle('yes');"> 

if (tr[i].className == thisname){ 

<tr class=yes>

来源

2011-11-19 17:56:21 david

是的，这工作。谢谢。从速度或可读性的角度来看，使用classname会更好吗？ – ONDEV

获取className会比找到我认为的属性值更快，您可以执行一些测试以确保速度 – david

切换显示和隐藏只有一些表行

回答

相关问题