Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS / 25 сообщений из 45, страница 1 из 2
  1  все
27.11.2013, 12:34
    #38479633
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
Здравствуйте! Сделал несложную древовидную таблицу, у которой сворачиваются/разворачиваются строки. За основу взял обычное дерево 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, 13:30
    #38479785
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
user89Как сделать так, чтобы при раскрытии узла Проект 1 , не уезжал влево блок с Задачами ?
Сделать таблицу таки таблицей и будет тебе счастие...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2013, 13:47
    #38479825
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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:50
    #38479837
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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, 14:10
    #38479882
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
krvsa,

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

Проблему решил еще вчера, но не было времени зайти на форум...
В общем, сделал верстку с помощью таблиц. Работающий вариант http://jsfiddle.net/NZaw4/2/
Можно развернуть все узлы, а потом свернуть/развернуть 1-ю строчку. Остальные узлы сохранят свое состояние.
Проверено в Опере, Мозилле, Хромом, IE9.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.11.2013, 11:44
    #38484315
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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, 13:01
    #38484358
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
krvsa,

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

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

ОК.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.12.2013, 14:45
    #38487445
Сергей111
Сергей111
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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, 15:17
    #38487515
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
Сергей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:23
    #38487527
Сергей111
Сергей111
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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:46
    #38487584
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
Сергей111,

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

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

ну да. Я в принципе и хотел сделать такую структуру...
Вроде получилось
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.12.2013, 09:31
    #38489797
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
таки без 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, 15:22
    #38490444
Сергей111
Сергей111
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
user89,

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

Я добавил контекстное меню с возможностью копировать и удалять узлы дерева.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.12.2013, 12:00
    #38491502
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
Сергей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:16
    #38491527
Сергей111
Сергей111
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
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
| Ответить | Цитировать | Написать  
17.12.2013, 12:21
    #38503317
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
В продолжении темы.
Сделал еще вариант древовидной таблицы http://jsfiddle.net/NZaw4/10

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

Недостатки:
- у каждой строки должен быть свой CSS-класс ( lev1 , lev2 и т.д.)
- если масштабировать таблицу через Copy-Paste, то надо следить за именами CSS-классов ( lev1 , lev2 ...)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2013, 12:25
    #38503321
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Tree Table CSS
 
На всякий случай код без сервиса 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
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS / 25 сообщений из 45, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 463ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1445738]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 149ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 60ms
get tp. blocked users:
 1ms
others: 213ms
total:  463ms
x
x
Закрыть


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