|
| |
|
|
| |
для: Rivs29
(13.10.2014 в 14:41)
| | | Изменяйте.
Условием начало цикла является:
if(e.tagName=='TD' && e.parentNode.className=='head')
Если ячейки заголовка, это будут картинки, значит условие должно быть:
if(e.tagName=='IMG' && e.parentNode.parentNode.className=='head')
Переменные:
e = e.parentNode; //теперь это ячейка
Все далее как и ранее.
var row = document.getElementById('tbl').rows, tr = e.parentNode, cel = tr.cells, idx;
.... | |
| |
|
|
| |
|
|
| |
для: confirm
(13.10.2014 в 13:26)
| | | А как изменить код, если внутри каждой открывающей TD обязательно есть img? | |
| |
|
|
| |
|
|
| |
для: Rivs29
(13.10.2014 в 13:11)
| | | Почему это не работает, все будет работать, обработка на любом элементе таблицы делегируется самой таблице, а функция проверяет по какому элементу произошел щелчок. Если перекрыть всю ячейку изображением, значит условие должно выполняться по тегу не TD, а IMG, а тег TR, который надо получить, будет не первым, а вторым по счету вверх. | |
| |
|
|
| |
|
|
| |
для: confirm
(12.10.2014 в 19:24)
| | | Хотя если прописать background то работает, и это хорошо. | |
| |
|
|
| |
|
|
| |
для: confirm
(12.10.2014 в 19:24)
| | | А если я в td вставляю картинку, оно вроде уже не работает? | |
| |
|
|
| |
|
|
| |
для: confirm
(12.10.2014 в 19:24)
| | | Большое спасибо! Чудный код и всё замечательно работает, сам бы я такой код не написал. Насчёт ul+li я и не предположил, но и tr+td вполне подходит, то, что нужно. )))
Благодарю! | |
| |
|
|
| |
|
|
| |
для: Rivs29
(12.10.2014 в 16:52)
| | | Ну так в этом случае надо еще же и индекс ячейки знать, этот индекс связывать с индексом строки текущей, а по нему уже и принимать решение. Изначально индекс ячейки активной можно "вынести за пределы":
<style>
#tbl {
width: 400px;
border-collapse: separate;
}
#tbl td {
border: 1px solid #999;
}
.head td {
background: #ddd;
cursor: pointer;
}
</style>
<script>
function toggle(e) {
if(e.tagName=='TD' && e.parentNode.className=='head') {
var row = document.getElementById('tbl').rows, tr = e.parentNode, cel = tr.cells, idx;
for(i=0, k=row.length; i<k; i++) {
if(row[i].className == 'head') {
for(j=0, n=cel.length; j<n; j++) {
if(tr==row[i] && cel[j] == e) {
idx = i+j+1;
break;
}
}
continue;
}
if(i != idx && !row[i].style.display) row[i].style.display = 'none';
else if(i == idx) row[idx].style.display == 'none' ? row[idx].style.display = '' : row[idx].style.display = 'none';
}
}
}
</script>
<table id="tbl" onclick="toggle(event.target || event.srcElement)">
<tr class="head">
<td>1</td><td>2</td><td>3</td>
</tr>
<tr style="display:none">
<td colspan="3">1-1</td>
</tr>
<tr style="display:none">
<td colspan="3">2-1</td>
</tr>
<tr style="display:none">
<td colspan="3">3-1</td>
</tr>
<tr class="head">
<td>4</td><td>5</td><td>6</td>
</tr>
<tr style="display:none">
<td colspan="3">4-1</td>
</tr>
<tr style="display:none">
<td colspan="3">5-1</td>
</tr>
<tr style="display:none">
<td colspan="3">6-1</td>
</tr>
<tr class="head">
<td>7</td><td>8</td><td>9</td>
</tr>
<tr style="display:none">
<td colspan="3">7-1</td>
</tr>
<tr style="display:none">
<td colspan="3">8-1</td>
</tr>
<tr style="display:none">
<td colspan="3">9-1</td>
</tr>
</table>
|
Вот только в вашем случае лучше все это сделать на чистом CSS+UL+LI, и только если нужны эффекты то JQ+UL+LI+DIV. | |
| |
|
|
| |
 402.1 Кб |
|
| |
для: confirm
(12.10.2014 в 04:26)
| | | Спасибо, оно работает. Только мне надо немного в другой структуре таблиц. В общем я разобрался, хоть и по другому, но не хватает такого элемента, чтобы, например ссылка, которая раскрывает то, что нужно, ещё скрывала всё остальное, что имеет изначальный style="dispay:none".
В архиве образец того, что нужно.
Но у меня пока что ссылки не убирают то, что было открыто другими ссылками. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.04.2012 в 08:37)
| | | Можно проще:
<style>
#tbl {
width: 400px;
border-collapse: separate;
}
#tbl td {
width: 100%;
border: 1px solid #999;
}
.head td {
background: #ddd;
cursor: pointer;
}
</style>
<script>
function toggle(e) {
if(e.tagName=='TD' && e.parentNode.className=='head') {
var row = document.getElementById('tbl').rows; e = e.parentNode;
for(i=0, k=row.length; i<k; i++) {
if(row[i].className == 'head') {
var mode = row[i] != e ? 1 : 0;
continue;
}
if(!row[i].style.display && mode) row[i].style.display = 'none';
else if(!mode) row[i].style.display == 'none' ? row[i].style.display = '' : row[i].style.display = 'none';
}
}
}
</script>
<table id="tbl" onclick="toggle(event.target || event.srcElement)">
<tr class="head">
<td>Заголовок</td>
</tr>
<tr style="display:none">
<td>Подзаголовок</td>
</tr>
<tr style="display:none">
<td>Запись один</td>
</tr>
<tr style="display:none">
<td>Запись два</td>
</tr>
<tr class="head">
<td>Заголовок №2</td>
</tr>
<tr style="display:none">
<td>Подзаголовок №2</td>
</tr>
<tr style="display:none">
<td>Запись один №2</td>
</tr>
<tr style="display:none">
<td>Запись два №2</td>
</tr>
</table>
|
| |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.04.2012 в 08:37)
| | | Спасибо. | |
| |
|
|
|
