ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
25 сообщений из 45, страница 1 из 2
  1  все
Tree Table CSS
    #38479633
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Здравствуйте! Сделал несложную древовидную таблицу, у которой сворачиваются/разворачиваются строки. За основу взял обычное дерево http://jsfiddle.net/NZaw4/1/ , только добавил ячейки в строки.
Почти правильно работающий вариант http://jsfiddle.net/cN57x/
Вопрос. Как сделать так, чтобы при раскрытии узла Проект 1 , не уезжал влево блок с Задачами ?
 
На всякий случай код без сервиса jsfiddle
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
li, ul{
	list-style:none;
	margin:0; padding:0;
	overflow:hidden;
}
.tbl {
	display:table;
	border-left:1px solid gray;
	border-top:1px solid gray;
}
.tr {
	display:table-row;
}
.tr > div {
	display:table-cell;
	border:1px solid gray;
	border-left:0;
	border-top:0;
	padding:2px 5px;
}
.thead {
	display:table-header-group;
	background-color:#ccc;
}
.tbody {
	display:table-row-group;
}
input{
	display:none;
}
input + li div label {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 4px;
}
input:checked + li div label {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 4px;
}
label	{
	cursor:pointer;
	padding-left:16px;
}
input ~ .tbody {
	display:none;
}
input:checked ~ .tbody {
	display:table-row-group;
}
</style>
</head>
<body>
<ul class="tbl">
		<li class="tr + thead">
			<div>Фамилия</div> <div>Проект</div> <div>Задача</div> <div>План</div> <div>Факт</div>
		</li>
		<input type="checkbox" id="chk1">
		<li class="tr">
			<div><label for="chk1">Иванов</label> </div> <div>&#160;</div><div>&#160;</div><div>&#160;</div><div>&#160;</div>
		</li>
		<ul class="tbody">
			<input type="checkbox" id="chk2">
			<li class="tr">
				<div>&#160;</div> <div><label for="chk2">Проект 1</label></div> <div>&#160;</div> <div>&#160;</div> <div>&#160;</div>
			</li>
			<ul class="tbody">
				<li class="tr"> <div>&#160;</div> <div>&#160;</div> <div>Задача 1</div> <div>10</div> <div>11</div> </li>
				<li class="tr"> <div>&#160;</div> <div>&#160;</div> <div>Задача 2</div> <div>20</div> <div>21</div> </li>
			</ul>
		</ul>
</ul> <!-- class="tbl" -->
</body>
</html>

...
Рейтинг: 0 / 0
27.11.2013, 12:34
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479785
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89Как сделать так, чтобы при раскрытии узла Проект 1 , не уезжал влево блок с Задачами ?
Сделать таблицу таки таблицей и будет тебе счастие...
...
Рейтинг: 0 / 0
27.11.2013, 13:30
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479825
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
krvsa,

я так и начал, но группировать строки можно только только через tbody , который НЕ поддерживает вложенность типа
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<tbody class="lev1">
  <tr>...</tr>
  <tr>...</tr>
  <tbody class="lev2">
    <tr>...</tr>
    <tr>...</tr>
  </tbody> <!-- lev2 -->
</tbody> <!-- lev1 -->


Также пробовал <tr> вкладывать в <ul><li> , бесполезно...
...
Рейтинг: 0 / 0
27.11.2013, 13:47
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479837
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89я так и начал, но группировать строки можно только только через tbody , который НЕ поддерживает вложенность типа
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<tbody class="lev1">
  <tr>...</tr>
  <tr>...</tr>
  <tbody class="lev2">
    <tr>...</tr>
    <tr>...</tr>
  </tbody> <!-- lev2 -->
</tbody> <!-- lev1 -->


Вложеность можно поддержать теми же классами...

Что в итоге-то хотел получить? Какую картинку?
...
Рейтинг: 0 / 0
27.11.2013, 13:50
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479882
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
krvsa,

хочу получить такую картинку
...
Рейтинг: 0 / 0
27.11.2013, 14:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479886
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
я не знаю как это сделать без js
...
Рейтинг: 0 / 0
27.11.2013, 14:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38479907
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89хочу получить такую картинку
Значит обычная табличка... Нужно только правильно понять, что нужно открывать/закрывать...
Думаю можно обойтить классами и атрибутами.
...
Рейтинг: 0 / 0
27.11.2013, 14:17
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38484186
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
krvsaДумаю можно обойтить классами и атрибутами.Чего-то не вышло :(
Если можно, дайте пример...

Проблему решил еще вчера, но не было времени зайти на форум...
В общем, сделал верстку с помощью таблиц. Работающий вариант http://jsfiddle.net/NZaw4/2/
Можно развернуть все узлы, а потом свернуть/развернуть 1-ю строчку. Остальные узлы сохранят свое состояние.
Проверено в Опере, Мозилле, Хромом, IE9.
...
Рейтинг: 0 / 0
29.11.2013, 23:48
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38484315
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89krvsaДумаю можно обойтить классами и атрибутами.Чего-то не вышло :(
Если можно, дайте пример...
Что-то типа такого...

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
-->
<style type="text/css">
.level2,
.level3 {
	display: none;
}
</style>
<script type="text/javascript">
$(function (){
	$('.level1').click(function (){
		onOff(this,2);
	});
	$('.level2').click(function (){
		onOff(this,3);
	});
});
function onOff(Obj,Lev) {
	var itm=$(Obj).data('item');
	var o=$(Obj.parentNode).find('.level'+Lev+'.'+itm);
	if (o.find(':visible').length==0) {
		o.slideDown();
	} else {
		$(Obj.parentNode).find('.'+itm).slideUp();
	};
};
</script>
</head>
<body>
<table>
	<thead>
		<tr>
			<th>ФИО</th>
			<th>Проект</th>
			<th>Задача</th>
		</tr>
	</thead>
	<tbody>
		<tr class='level1' data-item='item1'>
			<td>Иванов И.И.</td>
			<td></td>
			<td></td>
		</tr>
		<tr class='level2 item1' data-item='item1_1'>
			<td></td>
			<td>Задача1</td>
			<td></td>
		</tr>
		<tr class='level3 item1 item1_1'>
			<td></td>
			<td></td>
			<td>Проект1_1</td>
		</tr>
		<tr class='level2 item1' data-item='item1_2'>
			<td></td>
			<td>Задача2</td>
			<td></td>
		</tr>
		<tr class='level3 item1 item1_2'>
			<td></td>
			<td></td>
			<td>Проект2_1</td>
		</tr>
		<tr class='level1' data-item='item2'>
			<td>Петров П.П.</td>
			<td></td>
			<td></td>
		</tr>
		<tr class='level2 item2' data-item='item2_1'>
			<td></td>
			<td>Задача1</td>
			<td></td>
		</tr>
		<tr class='level3 item2 item2_1'>
			<td></td>
			<td></td>
			<td>Проект1_1</td>
		</tr>
		<tr class='level2 item2' data-item='item2_2'>
			<td></td>
			<td>Задача2</td>
			<td></td>
		</tr>
		<tr class='level3 item2 item2_2'>
			<td></td>
			<td></td>
			<td>Проект2_1</td>
		</tr>
	</tbody>
</table>
</body>
</html>

...
Рейтинг: 0 / 0
30.11.2013, 11:44
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38484358
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
krvsa,

обнаружен небольшой глюк (если раскрыть все узлы у Иванова, а потом свернуть/развернуть 1-ю строчку, то остальные тоже свернуться)
Но идея понятна. Спасибо.
...
Рейтинг: 0 / 0
30.11.2013, 13:01
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38484415
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89krvsa,

обнаружен небольшой глюк (если раскрыть все узлы у Иванова, а потом свернуть/развернуть 1-ю строчку, то остальные тоже свернуться)
Это разве глюк?
Ведь я закрываю всего Иванова. Это специально так и делалось...
...
Рейтинг: 0 / 0
30.11.2013, 14:35
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38484440
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
krvsa,

ОК.
...
Рейтинг: 0 / 0
30.11.2013, 15:22
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487445
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,
Хорошая идея и решение.
Только немного тяжело разбираться где какой ID ставить.
Немного изменил функцию Sh на такую
Код: javascript
1.
2.
3.
4.
5.
function sh(el) {
	var idx=el.parent().parent().parent().next().find('input');
	if(idx.attr('checked')=="checked") idx.removeAttr('checked') 
	else idx.attr('checked','checked');
	}


Тогда можно убрать все "id=" и для добавления узлов просто копировать имеющиеся
и делать поправки в тексте
...
Рейтинг: 0 / 0
03.12.2013, 14:45
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487515
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей111Только немного тяжело разбираться где какой ID ставить. Тут просто нумерация input-ов...
Самому первому input id=chk1 , второму input id=chk2 и т.д. На какой глубине они закопаны - не важно.

Код: javascript
1.
2.
3.
4.
5.
function sh(el) {
	var idx=el.parent().parent().parent().next().find('input');
	if(idx.attr('checked')=="checked") idx.removeAttr('checked') 
	else idx.attr('checked','checked');
	}

Чего-то не получилось :(
http://jsfiddle.net/NZaw4/3/
Это какая-то версия jQuery ?
...
Рейтинг: 0 / 0
03.12.2013, 15:17
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487527
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,

<script type="text/javascript" src="jquery-1.7.2.js"></script>

Вот у меня так:
Код: sql
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<table>
	<tr><th>Фамилия</th> <th>Проект</th> <th>Задача</th> <th>План</th> <th>Факт</th></tr>
	
	<tr> <td> <label><input type="checkbox" name="a1"><a onclick="sh($(this))">Иванов</a></label> </td> <td></td> <td></td> <td></td> <td></td> </tr>
	<tr><td colspan=5 class="node">
		<input type="checkbox">
		<table>
			<tr> <td></td> <td> <label><input type="checkbox" name="a1"><a onclick="sh($(this))">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
			<tr><td colspan=5 class="node">
				<input type="checkbox">
				<table>
					<tr> <td></td> <td></td> <td>Задача 1</td> <td>10</td> <td>11</td> </tr>
					<tr> <td></td> <td></td> <td>Задача 2</td> <td>20</td> <td>21</td> </tr>	
				</table>
			</td></tr>
			<tr> <td></td> <td> <label><input type="checkbox" name="a1"><a onclick="sh($(this))">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
			<tr><td colspan=5 class="node">
				<input type="checkbox">
				<table>
					<tr> <td></td> <td></td> <td>Задача 1</td> <td>10</td> <td>11</td> </tr>
					<tr> <td></td> <td></td> <td>Задача 2</td> <td>20</td> <td>21</td> </tr>	
				</table>
			</td></tr>			
		</table>		
	</td></tr>
	<tr> <td> <label><input type="checkbox" name="a1"><a onclick="sh($(this))">Иванов</a></label> </td> <td></td> <td></td> <td></td> <td></td> </tr>
	<tr><td colspan=5 class="node">
		<input type="checkbox">
		<table>
			<tr> <td></td> <td> <label><input type="checkbox" name="a1"><a onclick="sh($(this))">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
			<tr><td colspan=5 class="node">
				<input type="checkbox">
				<table>
					<tr> <td></td> <td></td> <td>Задача 1</td> <td>10</td> <td>11</td> </tr>
					<tr> <td></td> <td></td> <td>Задача 2</td> <td>20</td> <td>21</td> </tr>	
				</table>
			</td></tr>
		</table>		
	</td></tr>	
	
</table>
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script>
function sh(el) {
	var idx=el.parent().parent().parent().next().find('input');
	if(idx.attr('checked')=="checked") idx.removeAttr('checked') 
	else idx.attr('checked','checked');
	}
</script>
<style>
table {
	border-collapse:collapse;
	table-layout:fixed;
	width:560px;
}
td, th {
	border:1px solid gray;
	padding:2px 5px;
	width:100px;
}
th {background:#ccc;}
input{
	display:none;
}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 4px;
}
input:checked + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 4px;
}
label a	{
	cursor:pointer;
	padding-left:16px;
}
input ~ table {
	display:none;
}
input:checked ~ table {
	display:table;
	margin-top:-1px;
	margin-left:-1px;
}
.node {
	padding:0;
	border-bottom:0;
}
td+td+td+td {text-align:right;}

</style>
...
Рейтинг: 0 / 0
03.12.2013, 15:23
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487584
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей111,

ага. Работает.
...
Рейтинг: 0 / 0
03.12.2013, 15:46
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487589
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,

Так проще узлы добавлять:
Простым копи-пастом)))
...
Рейтинг: 0 / 0
03.12.2013, 15:48
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38487611
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей111,

ну да. Я в принципе и хотел сделать такую структуру...
Вроде получилось
...
Рейтинг: 0 / 0
03.12.2013, 15:56
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38489797
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
таки без ID и JQuery
Код: javascript
1.
2.
3.
4.
5.
6.
function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var nextRow = row.parentNode.rows[row.rowIndex + 1];
	var chk = nextRow.querySelector('td > input');
	chk.checked = !chk.checked;
}


Еще немного упростил верстку. Новая версия http://jsfiddle.net/NZaw4/7/
...
Рейтинг: 0 / 0
05.12.2013, 09:31
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38490444
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,

А я сейчас занят созданием контекстного меню для динамического добавления и удаления узлов дерева. Сегодня удаление закончил. Завтра попробую "добавление".
...
Рейтинг: 0 / 0
05.12.2013, 15:22
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38491434
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,

Я добавил контекстное меню с возможностью копировать и удалять узлы дерева.
...
Рейтинг: 0 / 0
06.12.2013, 11:17
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38491502
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей111,

посмотрел архив. Меню красивое (но шрифт мелковатый)
В целом работает нормально, но есть немного глюков
- ломаются линии во вложенных таблицах (я тут подробнее описал ) Нужно смещение на толщину линии
Код: css
1.
2.
3.
4.
5.
input:checked ~ table {
	display:table;
	margin-top:-1px;
	margin-left:-1px;
}


- если несколько раз вызвать меню, пункты не выбирать, а потом сделать CopyElement , то будет многократное добавление узлов в хаотичном порядке. Проверял а Опере, Хромом
...
Рейтинг: 0 / 0
06.12.2013, 12:00
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38491527
Сергей111
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей111
Участник
user89,

Спасибо, поправил глюк:
Код: sql
1.
2.
3.
4.
5.
6.
        if (event.which === 3)  {
            $(".selected-html-element").removeClass("selected-html-element");
            // Получаем элемент на котором был совершен клик:
            var target = $(event.target);
		.............
		..............
...
Рейтинг: 0 / 0
06.12.2013, 12:16
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38503317
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
В продолжении темы.
Сделал еще вариант древовидной таблицы http://jsfiddle.net/NZaw4/10

Достоинства метода:
- простая верстка (обычная плоская таблица)
- легко формируется на сервере (например из SQL-запроса)

Недостатки:
- у каждой строки должен быть свой CSS-класс ( lev1 , lev2 и т.д.)
- если масштабировать таблицу через Copy-Paste, то надо следить за именами CSS-классов ( lev1 , lev2 ...)
...
Рейтинг: 0 / 0
17.12.2013, 12:21
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38503321
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
На всякий случай код без сервиса jsfiddle.net
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
<html>
<head>
<title>Дерево (древовидная таблица) без JavaScript, только HTML и CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
}
.treetable th {
	background:#4682B4;
	color:#FFFFFF;
}
.treetable td, th {
	padding:3px;
	border:1px solid #D3D3D3;
	width:200px;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {
	display:none;
}
.treetable thead tr {
	display:table-row;
}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {
	background:#708090;
}
.lev3 {
	background:#8FA0B0;
}
input[type="checkbox"]{
	display:none;
}
input + a {
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkElEQVQYlXWOvRWDQAyDv/DYK2wQSro8OkpGuRFcUjJCRmEE0TldCpsjPy9qzj7Jki62Pgh4vnqbbbEWuN+use/PlArwHccWGg780psENGFY6W4YgxZIAM339WmT3m397YYxxn6aASslFfVotYLTT3NwcuTKlFpNR2sdEak4acdKeafPlE2SZ7sw/1BEtX94AXYTVmyR94mPAAAAAElFTkSuQmCC)
	no-repeat 0px 5px;
}
input:checked + a{
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAeklEQVQYlX2PsRGDMAxFX3zeK9mAlHRcupSM4hFUUjJCRpI70VHIJr7D8BtJ977+SQ9Zf7isVG16WSQC0/D0OW/FqoBlDFkIVJ2xAhA8sI/NHbcYiFrPfI0fGklKagDx2F4ltdtaM0J9L3dxcVxi+zv62E+MwPs7c60dClRP6iug7wUAAAAASUVORK5CYII=)
	no-repeat 0px 5px;
}
td+td+td+td {text-align:right;}
</style>
</head>
<body onload="ResetAll();">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable">
<thead>
	<tr><th>ФИО</th> <th>Проект</th> <th>Задача</th> <th>План</th> <th>Факт</th> </tr>
</thead>
<tr class="lev1"> <td><label><input type="checkbox"><a onclick="sh(this)">Иванов</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 1</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 1_1</a></label></td>	<td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>10</td> <td>20</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>20</td> <td>40</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>30</td> <td>60</td> </tr>
<tr class="lev3"> <td></td><td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 1_2</a></label></td> <td></td><td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>90</td> <td>99</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>80</td> <td>88</td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 2</a></label></td> <td></td><td></td><td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 2_1</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>12</td> <td>12</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>15</td> <td>15</td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 2_2</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>22</td> <td>22</td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>25</td> <td>25</td> </tr>
<tr class="lev2">	<td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект 3</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3"> <td></td> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Задача 3_1</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>30</td> <td>31</td> </tr>

<tr class="lev1"> <td><label><input type="checkbox"><a onclick="sh(this)">Петров</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2"> <td></td> <td><label><input type="checkbox"><a onclick="sh(this)">Проект А</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3">	<td></td> <td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Задача А</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4"> <td></td> <td></td> <td></td> <td>100</td><td>200</td> </tr>

<tr class="lev1">	<td><label><input type="checkbox"><a onclick="sh(this)">Сидоров</a></label></td> <td></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev2">	<td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Проект Б</a></label></td> <td></td> <td></td> <td></td> </tr>
<tr class="lev3">	<td></td> <td></td>	<td><label><input type="checkbox"><a onclick="sh(this)">Задача Б</a></label></td> <td></td> <td></td> </tr>
<tr class="lev4">	<td></td> <td></td> <td></td> <td>123</td><td>456</td> </tr>
</table>

<script>
function ResetAll() {
	var cs = document.getElementsByTagName('input');
	for (i=0; i < cs.length; i++) {
		if (cs[i].type == 'checkbox') {
			cs[i].checked = false;
		}
	}
}

function ShowLevel(row,lv) {
	var tBody = row.parentNode;
	var i = row.rowIndex;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		if (row.className.substring(3)*1 == lv+1) {
			row.style.display = 'table-row';
			if ((row.querySelector('td input')) && row.querySelector('td input').checked) {
				ShowLevel(row,lv+1);
			}
		}
		i+=1;
		row = tBody.rows[i];
	}
}

function HideLevel(row,lv) {
	var i = row.rowIndex;
	var tBody = row.parentNode;
	row = tBody.rows[i]; // Попытка перейти к следующей строке
	while (row && row.className.substring(3)*1 > lv) {
		row.style.display = 'none';
		i+=1;
		row = tBody.rows[i];
	}
}

function sh(el) {
	var row = el.parentNode.parentNode.parentNode;
	var lv = row.className.substring(3)*1; // Уровень строки, циферка после 'lev'
	if (row.querySelector('td input').checked) {
		HideLevel(row,lv);
	} else {
		ShowLevel(row,lv);
	}
}

function SwapAll(b) {
	var tbl = document.getElementsByClassName('treetable')[0];
	for (i=1; i < tbl.rows.length; i++) {
		if (tbl.rows[i].className != 'lev1') {
			if (b) {tbl.rows[i].style.display = 'table-row';}
			else {tbl.rows[i].style.display = 'none';}
		}

		if (tbl.rows[i].querySelector('td input')) {tbl.rows[i].querySelector('td input').checked = b;}
	}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
17.12.2013, 12:25
| Ответить | Цитировать | Написать  
25 сообщений из 45, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38479886&tid=1445738]:
 0ms
get settings:
 10ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 149ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 92ms
get tp. blocked users:
 2ms
others: 252ms
total:  549ms
созд. / загр.: 549ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]