title: Toggle Show And Hide Only Some Table Rows
body: <p>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.</p>
  
  <p>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.  </p>
  
  <p>Is there a better way to do this?</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
     &lt;script&gt;
          function toggle(thisname) {
  
             tr=document.getElementsByTagName('tr')
  
             for (i=0;i&lt;tr.length;i++){
                if (tr[i].getAttribute(thisname)){
                   if ( tr[i].style.display=='none' ){
                      tr[i].style.display = '';
                   }
                else {
                   tr[i].style.display = 'none';
                   }
                }
             }
          }
     &lt;/script&gt;
     &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;span onClick="toggle('hide');"&gt;TOGGLE&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;table&gt;
     &lt;tr &gt;&lt;td &gt;display this row 1&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 1&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 2&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 2&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 3&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 3&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 4&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 5&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 6&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 4&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 5&lt;/td&gt;&lt;/tr&gt;
     &lt;tr&gt;&lt;td&gt;display this row 7&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 6&lt;/td&gt;&lt;/tr&gt;
     &lt;tr hide=yes &gt;&lt;td&gt;hide this row 7&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>