Toggle-Ein-Und Ausblenden, Nur Einige Zeilen

Ich versuche zum ein - /ausblenden (über einen toggle-Mechanismus) nur bestimmte Zeilen in meiner Tabelle. Ich habe etwas in der Nähe, code ist unten. Was ich Las in anderen Fragen ist dies die Verwendung von style-id ' s und ich haben versucht, aber es scheitert für mich. So, dass ist der Grund, warum ich verwendet, 'hide=yes' und pass, die in der toggle-Funktion.

Dies ist eine Tabelle mit ein paar hundert Einträgen, wenn ich auf Umschalten kann reduzieren bis zu weniger als 30 an einem bestimmten Tag.

Gibt es einen besseren Weg, dies zu tun?

<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>

InformationsquelleAutor ONDEV | 2011-11-19

Schreibe einen Kommentar