поиск элементов dom
Всем привет столкнулся с такой проблемой у меня есть таблица которая формируется циклом и группируется по дате. В зависимости от даты мне нужно скрывать/отображать строки. выглядит след образом:
<table> <tr class="date_01_07_2013"><td>01.07.2013(Это основное поле на котором кнопка скрыть/отобразить)</td></tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> .....и так на каждую дату <tr class="date_31_07_2013"><td>31.07.2013</td></tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> </table> чтобы скрывать/отображать поля я решил присваивать tr классу display = 'none';/display = 'table-row'; написал вот такой скрипт function close(){ var divs=document.getElementsByTagName("TR"); for( var i=0; i<divs.length; i++) if(divs[i].className=="dt01.07.2013") divs[i].style.display = 'none'; } function open(){ var divs=document.getElementsByTagName("TR"); for( var i=0; i<divs.length; i++) if(divs[i].className=="dt01.07.2013") divs[i].style.display = 'table-row'; } а в цикл к главному окну с датой добавил <i class="icon-min" onclick="clos()"></i> <i class="icon-max" onclick="open()"></i> в итоге получилось скрывать и отображать только первое число а чтобы скрывать и отображать остальные мне нужно скопировать скрипт 60 раз и менять только className и имя функции я знаю что можно эту функцию сделать как массив или цикл но вот как это написать знаний увы не хватает а времени в обрез подскажите как это можно реализовать или литературу где об этом можно прочитать. |
vladislav.blinov,
вытаскиваем класс парента date_01_07_2013 убираем te_ получаем нужный класс -- 2 функции на все строки |
<tr class="date_01_07_2013"><i class="icon-min" onclick="clos1()"></i> <i class="icon-max" onclick="open1()"></i><td>01.07.2013</td></tr> <tr class="date_02_07_2013"><i class="icon-min" onclick="clos2()"></i> <i class="icon-max" onclick="open2()"></i><td>01.07.2013</td></tr> ..... верхняя строка всегда отображена скрываются только те строки которые сгруппированы по этой дате если вытащить один общий клас то будут скрываться все поля а не по датам. |
vladislav.blinov, можно группировать строки с одной датой в <tbody> секции, чтобы не парсить дату можно добавить дополнительный data-* атрибут типа data-date="тут дата"
|
Цитата:
|
Цитата:
кликайте по датам ... оно ? <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <table> <tr class="date_01_07_2013"><td>01.07.2013</td></tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt01_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="date_31_07_2013"><td>31.07.2013</td></tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> <tr class="dt31_07_2013"> <td>имя</td> <td>фамилия</td> </tr> </table> <script> var trs = document.getElementsByTagName("TR"); for (var i = 0; i < trs.length; i++) { var c = trs[i].className; if (/^date_/.test(c)) { trs[i].onclick = function () { var c = this.className.replace('ate_', 't'); for (var k = 0; k < trs.length; k++) { if (c == trs[k].className) { var display = trs[k].style.display trs[k].style.display = display != 'none' ? 'none' : 'table-row' } } } trs[i].onclick() //можно убрать или открыть первую дату => i && (trs[i].onclick()) } } </script> </body> </html> |
Цитата:
|
vladislav.blinov,
в общих чертах уже во 2 посте только 1 функция на всё - обходим все строки - если класс начинается на date ставим такой строке реагирование на клик -- который обходит все строки и ищет нужный класс -- который получаем из класса строки методом replace и ставит display в нужную нам позицию |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 07:34. |