Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   поиск элементов dom (https://javascript.ru/forum/css-html/39817-poisk-ehlementov-dom.html)

vladislav.blinov 13.07.2013 09:15

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

я знаю что можно эту функцию сделать как массив или цикл но вот как это написать знаний увы не хватает а времени в обрез подскажите как это можно реализовать или литературу где об этом можно прочитать.

рони 13.07.2013 09:48

vladislav.blinov,
вытаскиваем класс парента date_01_07_2013 убираем te_ получаем нужный класс -- 2 функции на все строки

vladislav.blinov 13.07.2013 10:02

<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>

.....
верхняя строка всегда отображена скрываются только те строки которые сгруппированы по этой дате если вытащить один общий клас то будут скрываться все поля а не по датам.

danik.js 13.07.2013 10:18

vladislav.blinov, можно группировать строки с одной датой в <tbody> секции, чтобы не парсить дату можно добавить дополнительный data-* атрибут типа data-date="тут дата"

vladislav.blinov 13.07.2013 10:38

Цитата:

Сообщение от danik.js (Сообщение 262027)
vladislav.blinov, можно группировать строки с одной датой в <tbody> секции, чтобы не парсить дату можно добавить дополнительный data-* атрибут типа data-date="тут дата"

переименовывать классы нельзя группировать тоже не получается уже пробовал.

рони 13.07.2013 11:12

Цитата:

Сообщение от vladislav.blinov
верхняя строка всегда отображена скрываются только те строки которые сгруппированы по этой дате если вытащить один общий клас то будут скрываться все поля а не по датам.

моя твоя непонимай ...

кликайте по датам ... оно ?
<!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 13.07.2013 12:05

Цитата:

Сообщение от рони (Сообщение 262036)
моя твоя непонимай ...

оно только не могу разобраться в скрипте, как он работает и как привязан к датам, можешь в общих чертах объяснить?

рони 13.07.2013 12:31

vladislav.blinov,
в общих чертах уже во 2 посте только 1 функция на всё - обходим все строки - если класс начинается на date
ставим такой строке реагирование на клик -- который обходит все строки и ищет нужный класс -- который получаем из класса строки методом replace и ставит display в нужную нам позицию

vladislav.blinov 13.07.2013 12:44

Цитата:

Сообщение от рони (Сообщение 262048)
vladislav.blinov,
в общих чертах уже во 2 посте только 1 функция на всё - обходим все строки - если класс начинается на date
ставим такой строке реагирование на клик -- который обходит все строки и ищет нужный класс -- который получаем из класса строки методом replace и ставит display в нужную нам позицию

Спасибо подход хороший, только мне обязательно нужна кнопка по которой нужно щёлкать открыть/закрыть. Можно как нибудь привязать это фунукцию не к дате а к онклик с классом строк которые нужно свернуть?

рони 13.07.2013 13:00

Цитата:

Сообщение от vladislav.blinov
Можно как нибудь привязать это фунукцию не к дате а к онклик с классом строк которые нужно свернуть?

непонимаю -- а привязать можно к чему угодно


Часовой пояс GMT +3, время: 07:34.