Показать и скрыть только некоторые строки таблицы - PullRequest
Новая
       9

Показать и скрыть только некоторые строки таблицы

2 голосов
/ 19 ноября 2011

Я пытаюсь показать / скрыть (с помощью переключателя) только определенные строки в моей таблице. Я подошел немного ближе, код ниже. То, о чем я читал в других вопросах об этом, - это использование идентификаторов стилей, и я пробовал это, но у меня ничего не вышло. Вот почему я использовал «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>

1 Ответ

2 голосов
/ 19 ноября 2011

Ваш подход выглядит нормально, я предлагаю вам объявить переменные tr и i

поочередно вы можете использовать class вместо 

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

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

 <tr class=yes>
...