поиск элементов 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 в нужную нам позицию |
Цитата:
|
Цитата:
|
Цитата:
function close(нужные классы){
var trs=document.getElementsByTagName("TR");
for( var i=0; i<екы.length; i++)
if(trs.className==нужные классы)
trs.style.display = 'none';
}
а потом в первое поле где date_01_07_2013 вставить ссылку <a href="javascript:close(dt01_07_2013)">показать поле</a> но вот всё никак не выходит:( |
vladislav.blinov,
что мешает в код который я дал добавить вашу кнопку |
мешают только знания точнее их отсутствие) если не трудно напиши пример кнопки.
|
vladislav.blinov,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a{
margin-left: 10px
}
</style>
</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>
for (var a = document.getElementsByTagName("TR"), b = 0; b < a.length; b++) {
var d = a[b],
e = d.className;
if (/^date_/.test(e)) {
var e = e.replace("ate_", "t"),
f = document.createElement("a");
f.appendChild(document.createTextNode("\u0441\u043a\u0440\u044b\u0442\u044c"));
d.cells[0].appendChild(f);
f.href = "#";
f.onclick = function (g) {
return function () {
this.textContent = this.textContent == "\u0441\u043a\u0440\u044b\u0442\u044c" ? "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c" : "\u0441\u043a\u0440\u044b\u0442\u044c" ;
for (var c = 0; c < a.length; c++) g == a[c].className && (a[c].style.display = "none" != a[c].style.display ? "none" : "table-row");
return !1
}
}(e);
f.onclick()
}
};
</script>
</body>
</html>
|
спасибо за помощь :thanks:
но я никак не могу разобраться в этих строчках
if (/^date_/.test(e)) {
var e = e.replace("ate_", "t"),
получается он в первой tr ищет строчку date_ потом делает replace и превращает строку из date_ в dt но если в первой tr будет class="date_tr date_01_07_2013" и по логике поменять код на
if (/^date_tr.date_/.test(e)) {
var e = e.replace("ate_tr.date_", "t"),
то он должен работать как и было но он начинает работать наоборот т.е. скрывает первую tr (сам себя) что я написал не правильно? |
vladislav.blinov,
задача была с одним классом из date_31_07_2013 получаем dt31_07_2013 если классов много решается иначе например методом job |
это ни к чему, код твой хорошо работает, просто я его модернизирую и изучаю для того что бы лучше разбираться в js. если не сложно скажи метод которым я смогу это сделать, а я попробую про него прочитать и сам уже добить. был бы признателен.
|
vladislav.blinov,
читайте про RegExp меняйте /^date_/ и var e = e.replace("ate_", "t"), и если необходимо g == a[c].className на if (/class(условно)/.test(a[c].className)) |
| Часовой пояс GMT +3, время: 04:10. |