поиск элементов 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. |