javascript - Toggle Show And Hide Only Some Table Rows

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>

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>

Share Improve this question asked Nov 19, 2011 at 17:44 ONDEV 5663 gold badges7 silver badges15 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Your approach seems ok, i suggest you declare variables tr and i

alternately you could use class instead

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

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

 <tr class=yes>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745145260a4613618.html

javascript - Toggle Show And Hide Only Some Table Rows - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Toggle Show And Hide Only Some Table Rows - Stack Overflow

1 Answer 1

相关推荐