Переключить отображение и скрытие только некоторых строк таблицы

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

javascript html dhtml
person ONDEV    schedule 19.11.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

в качестве альтернативы вы могли бы использовать class вместо

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

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

 <tr class=yes>
person david    schedule 19.11.2011
comment
Да, это работает. Спасибо. Лучше ли использовать имя класса с точки зрения скорости или удобочитаемости? - person ONDEV; 19.11.2011
comment
Я думаю, что получение className будет быстрее, чем поиск значения атрибута, вы можете выполнить некоторые тесты, чтобы убедиться в скорости - person david; 19.11.2011