Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2013, 09:15
Аспирант
Отправить личное сообщение для vladislav.blinov Посмотреть профиль Найти все сообщения от vladislav.blinov
 
Регистрация: 13.07.2013
Сообщений: 30

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

я знаю что можно эту функцию сделать как массив или цикл но вот как это написать знаний увы не хватает а времени в обрез подскажите как это можно реализовать или литературу где об этом можно прочитать.
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2013, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

vladislav.blinov,
вытаскиваем класс парента date_01_07_2013 убираем te_ получаем нужный класс -- 2 функции на все строки
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2013, 10:02
Аспирант
Отправить личное сообщение для vladislav.blinov Посмотреть профиль Найти все сообщения от vladislav.blinov
 
Регистрация: 13.07.2013
Сообщений: 30

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

.....
верхняя строка всегда отображена скрываются только те строки которые сгруппированы по этой дате если вытащить один общий клас то будут скрываться все поля а не по датам.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2013, 10:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

vladislav.blinov, можно группировать строки с одной датой в <tbody> секции, чтобы не парсить дату можно добавить дополнительный data-* атрибут типа data-date="тут дата"
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2013, 10:38
Аспирант
Отправить личное сообщение для vladislav.blinov Посмотреть профиль Найти все сообщения от vladislav.blinov
 
Регистрация: 13.07.2013
Сообщений: 30

Сообщение от danik.js Посмотреть сообщение
vladislav.blinov, можно группировать строки с одной датой в <tbody> секции, чтобы не парсить дату можно добавить дополнительный data-* атрибут типа data-date="тут дата"
переименовывать классы нельзя группировать тоже не получается уже пробовал.
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2013, 11:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от 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>
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2013, 12:05
Аспирант
Отправить личное сообщение для vladislav.blinov Посмотреть профиль Найти все сообщения от vladislav.blinov
 
Регистрация: 13.07.2013
Сообщений: 30

Сообщение от рони Посмотреть сообщение
моя твоя непонимай ...
оно только не могу разобраться в скрипте, как он работает и как привязан к датам, можешь в общих чертах объяснить?
Ответить с цитированием
  #8 (permalink)  
Старый 13.07.2013, 12:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

vladislav.blinov,
в общих чертах уже во 2 посте только 1 функция на всё - обходим все строки - если класс начинается на date
ставим такой строке реагирование на клик -- который обходит все строки и ищет нужный класс -- который получаем из класса строки методом replace и ставит display в нужную нам позицию
Ответить с цитированием
  #9 (permalink)  
Старый 13.07.2013, 12:44
Аспирант
Отправить личное сообщение для vladislav.blinov Посмотреть профиль Найти все сообщения от vladislav.blinov
 
Регистрация: 13.07.2013
Сообщений: 30

Сообщение от рони Посмотреть сообщение
vladislav.blinov,
в общих чертах уже во 2 посте только 1 функция на всё - обходим все строки - если класс начинается на date
ставим такой строке реагирование на клик -- который обходит все строки и ищет нужный класс -- который получаем из класса строки методом replace и ставит display в нужную нам позицию
Спасибо подход хороший, только мне обязательно нужна кнопка по которой нужно щёлкать открыть/закрыть. Можно как нибудь привязать это фунукцию не к дате а к онклик с классом строк которые нужно свернуть?
Ответить с цитированием
  #10 (permalink)  
Старый 13.07.2013, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск элементов по тэгу - getElementsByTagName('table') lamer Общие вопросы Javascript 8 31.01.2013 05:58
Поиск элементов DOM boberjs jQuery 7 14.12.2012 15:26
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
поиск элементов в DOM Bebarr Swallow Общие вопросы Javascript 1 24.06.2011 14:57
Поиск элементов по DOM-дереву и работа с XML и XSLT mister_maxim Events/DOM/Window 1 13.03.2011 19:41