PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
ЧИМ
Отправлено: 04 Марта, 2019 - 12:30:30
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




Добрый день формучане!
Чёт не лезет в голову как обойти проблему не нагромождая её ненужными элементами.
Пытаюсь сделать что то вроде карточки, в которой по селекту выбирается пункт меню и исходя из него скрываются определённые строки из таблицы и показываются только нужные.
Вот код:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. <script>
  3.         function type_obj(){
  4.             select=document.getElementById("select_obj");
  5.             sist=document.getElementsByClassName('sist');
  6.             print=document.getElementsByClassName('print');
  7.         switch(select.options[select.selectedIndex].text){
  8.             case 'Системный блок':                        
  9.                 var i;
  10.                 for (i = 0; i < sist.length; i++) {
  11.                 sist[i].hidden=false;
  12.                 }
  13.                 var j;
  14.                 for (j = 0; j < print.length; j++) {
  15.                 print[j].hidden=true;
  16.                 }
  17.             break;
  18.             case 'Принтер':
  19.             case 'МФУ':                        
  20.                 var i;
  21.                 for (i = 0; i < sist.length; i++) {
  22.                 sist[i].hidden=true;
  23.                 }
  24.                 var j;
  25.                 for (j = 0; j < print.length; j++) {
  26.                 print[j].hidden=false;
  27.                 }
  28.             break;
  29.            
  30.         }
  31.         }
  32.     </script>
  33.  
  34. <select id="select_obj" onchange="type_obj()"><optgroup><option disabled selected value>Выбирите значение</option><option>Принтер</option><option>МФУ</option><option>Системный блок</option></optgroup></select>
  35.  
  36. <table border="1">
  37.         <thead>
  38.             <tr>
  39.                 <th colspan="2">Заполните данные</th>                
  40.             </tr>
  41.         </thead>
  42.         <tbody>
  43.             <tr class="sist" hidden="">
  44.                 <td>CPU</td>
  45.                 <td></td>
  46.             </tr>
  47.             <tr class="sist" hidden="">
  48.                 <td>RAM</td>
  49.                 <td></td>
  50.             </tr>
  51.             <tr class="sist" hidden="">
  52.                 <td>Drive</td>
  53.                 <td></td>
  54.             </tr>
  55.             <tr class="sist" hidden="">
  56.                 <td>OS</td>
  57.                 <td></td>
  58.             </tr>
  59.             <tr class="print" hidden="">
  60.                 <td>Формат</td>
  61.                 <td></td>
  62.             </tr>
  63.             <tr class="print" hidden="">
  64.                 <td>Тип</td>
  65.                 <td><select><optgroup><option>Лазерный</option><option>Струйный</option></select></td>
  66.             </tr>
  67.             <tr class="print" hidden="">
  68.                 <td>Картридж</td>
  69.                 <td></td>
  70.             </tr>
  71.         </tbody>
  72.     </table>
  73.  


Получается что для того что бы расширить список например до 10-20 наименований, мне нужно будет в каждом кейсе скрывать все строки таблицы которые не соответствуют выбору, т.е. делать по циклу для каждого класса чтоб изменить атрибут hidden.
Существует ли более элегантное исполнение таких примеров?
 
 Top
Vladimir Kheifets
Отправлено: 04 Марта, 2019 - 18:39:39
Post Id



Посетитель


Покинул форум
Сообщений всего: 405
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 21 раз(а)




ЧИМ пишет:
Добрый день формучане!
Чёт не лезет в голову как обойти проблему не нагромождая её ненужными элементами.
Пытаюсь сделать что то вроде карточки, в которой по селекту выбирается пункт меню и исходя из него скрываются определённые строки из таблицы и показываются только нужные.
Получается что для того что бы расширить список например до 10-20 наименований, мне нужно будет в каждом кейсе скрывать все строки таблицы которые не соответствуют выбору, т.е. делать по циклу для каждого класса чтоб изменить атрибут hidden.
Существует ли более элегантное исполнение таких примеров?

Добрый день!
Можно сделать так:
1. Вмето классов "print","sist" и.т.д. до 20 и более пишем классы "table_row_group1","table_row_group2", "table_row_group3" и.т.д.
2. Свойства определяем так:
CODE (html):
скопировать код в буфер обмена
  1.  tr[class^="table_row_group"] {
  2.     ................
  3.  }

3. определяем два класса:
CODE (html):
скопировать код в буфер обмена
  1. tr.on {display:table-row}
  2. tr.off {display:none}

4. Сам принцип развёртывания и свёртывания - ипользование мультиклассов в js.
Например, "table_row_group1 on" или "table_row_group1 off"
5. Для этого Вам нужно определить какой класс и как нужно модифицировать
CODE (javascript):
скопировать код в буфер обмена
  1.  select=document.getElementById("select_obj");  
  2.    i=select.selectedIndex;
  3.    clsssName="table_row_group"+i

и для него определить мультикласс "table_row_group1 on", а для остальных "table_row_group1 off"
6.Для реализации этой затеи Вам пригодятся несколько js-функций
Спойлер (Отобразить)
Удачи!

(Отредактировано автором: 04 Марта, 2019 - 18:44:04)

 
 Top
ЧИМ
Отправлено: 04 Марта, 2019 - 19:56:05
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




Спасибо за ответ. Попробую применить ваш код.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB