ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
45 сообщений из 45, показаны все 2 страниц
  все  
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
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720265
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Здравствуйте
Очень понравилось как вы сделали такое красивое решение.

Прошу Вас помочь и мне.
У меня уже есть готовое решение, оно меня устраивает по контексту и разметке, но..... помогите ещё выравнять картинку (плюс/минус) относительно текста и границ таблицы, чтоб было ровненько.

КОД + Пример

Спасибо большое заранее!
...
Рейтинг: 0 / 0
14.08.2014, 14:06
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720564
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

я сейчас занят сильно, когда освобожусь не знаю...
Посмотрите еще универсальный алгоритм, который делает любое количество групп на выбор.
Здесь группировка реализуется на JavaScript. На входе имеем обычную, простую таблицу безо всяких идентификаторов строки, стилей и т.д. На сервере не делаем ничего (клиенту отдаем обычный HTML вида <tr> <td> </td> </tr>) 16127786   Результат: http://jsfiddle.net/NZaw4/55/embedded/result/
...
Рейтинг: 0 / 0
14.08.2014, 16:56
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720584
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
я бы первые <td></td> <td></td> <td></td> в каждой строке заменил бы на colspan=3 или 2
...
Рейтинг: 0 / 0
14.08.2014, 17:09
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720628
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Спасибо вам - это решение просто прекрасно, я уже оценил...

Но у меня у же всё как бы сделано и то, что уже есть - меня устраивает.
Мне нужна только "косметическая" доработка.

Я не могу сообразить как поставить надпись "Отчеты" рядом с плюсиком (минусиком) и ровно относительно верхней и нижней границы таблицы. И всё.

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

тут у картинок был большой размер. Поменял на свои. Также сделал display:inline-block;
http://learn.javascript.ru/play/B8h1p

ИМХО
- картинки лучше передавать не через тег <img>, а через base64 или спрайты
- эффект замедления при сворачивании/разворачивании раздражает сотрудников (им нужно быстрее увидеть результат, а тут тормоза, особенно если часто пользуются деревом при работе)
- jQuery здесь не нужен, даже ради эффекта замедления :))
...
Рейтинг: 0 / 0
14.08.2014, 23:03
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38720866
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Отменный результат!!!
Даже не высказать словами! Самое, что доктор прописал!

Огромное спасибо.
Про задержку абсолютно согласен. Тоже считаю, что в таких именно решениях она ни к чему.
...
Рейтинг: 0 / 0
15.08.2014, 06:00
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721548
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

У меня сайт на Битриксе и это меня бесит просто

После сохранения в редакторе код скрипта
Код: javascript
1.
2.
3.
4.
5.
6.
$(window).load(function(){
$(document).ready(function(){
$('.spoiler').prepend('<img class="plus" src="http://f6.s.qip.ru/IRG4yukf.png"><img class="minus" src="http://f5.s.qip.ru/IRG4yukg.png"> ').addClass('plus');
$('.spoiler').click(function() {$(this).toggleClass('plus minus').next().slideToggle(300);});
});
});



превращается в
Код: javascript
1.
2.
3.
4.
5.
6.
$(window).load(function(){
$(document).ready(function(){
$('.spoiler').prepend('<img id="bxid_495307" class="plus" src="http://f6.s.qip.ru/IRG4yukf.png"  /><img id="bxid_903419" class="minus" src="http://f5.s.qip.ru/IRG4yukg.png"  /> ').addClass('plus');
$('.spoiler').click(function() {$(this).toggleClass('plus minus').next().slideToggle(300);});
});
});



и перестает работать открытие закрытие и не отображаются значки плюс/минус

как быть? кто подскажет?
...
Рейтинг: 0 / 0
15.08.2014, 19:08
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721572
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
И ещё...

если в первых ветках поставить body open (чтобы по при открытии страницы эти ветки были сразу открыты), то по идее должен стоять значок "минус" (потому что уже открыто), а стоит значок "плюс"

например так:
Код: html
1.
2.
3.
4.
5.
6.
7.
<body>
<div class="header">
<div class="spoiler" style="background:#F8FBEF;">Отчеты</div>
<div class="body open">
<div class="spoiler">2014</div>
<div class="body open">
<table>
...
Рейтинг: 0 / 0
15.08.2014, 20:04
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721661
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

когда-то рисовал простое дерево без JavaScript http://jsfiddle.net/NZaw4/1/   (работает в нормальных браузерах и IE9+)
С jQuery я не работал... Он точно нужен в этом проекте?

Пока есть время, переделайте архитектуру. вадя дал правильный совет (сверстать на таблицах и объединить ячейки через colspan )
Для сворачивания/разворачивания узлов достаточно простого JavaScript...
Переделать на основе шаблона, думаю займет около часа.
 
Шаблончик
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:500px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.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;
}
</style>
</head>
<body>
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable">
<col width=10> <col width=10>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=5><label><input type="checkbox"><a onclick="sh(this)">Иванов</a></label></td> </tr>
<tr class="lev2"> <td></td> <td colspan=4><label><input type="checkbox"><a onclick="sh(this)">Проект 1</a></label></td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 1_1</a></label></td>	</tr>
<tr class="lev4"> <td colspan=2></td> <td>Бронебойный</td> <td>10</td> <td>20</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td>Парящий</td> <td>20</td> <td>40</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td>Танк</td> <td>30</td> <td>60</td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 1_2</a></label></td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>90</td> <td>99</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>80</td> <td>88</td> </tr>
<tr class="lev2"> <td></td> <td colspan=4><label><input type="checkbox"><a onclick="sh(this)">Проект 2</a></label></td> </tr>
<tr class="lev3"> <td colspan=2></td> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Задача 2_1</a></label></td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>12</td> <td>12</td> </tr>
<tr class="lev4"> <td colspan=2></td> <td></td> <td>15</td> <td>15</td> </tr>

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

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

...
Рейтинг: 0 / 0
16.08.2014, 00:26
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721747
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Буквально вчера я именно этот проект переделал под свои нужды. Очень, между прочим, прекрасно. Правда.

Если вы ещё подскажете, как сделать чтобы при открытии изначально сразу был такой вид - было бы вообще шоколад

Именно вот так

...
Рейтинг: 0 / 0
16.08.2014, 14:51
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721762
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,
 
так?
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:700px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {background:#708090;}
.lev2 td:first-child {padding-left:10px;}
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;
}
</style>
</head>
<body onload="ShowOnLoad('MyTable')">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable" id="MyTable">
<col width=84><col width=480>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">Отчеты</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">2014</a></label></td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Защитить Исследовательский центр Парения</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Освободить Комплекс по добыче воды</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>24.05.2014</td> <td>Уничтожить дессикатор</td> <td>Страж свободы</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2013</a></label></td> </tr>
<tr class="lev3"> <td>01.04.2013</td> <td>Начало 2-го квартала</td> <td>Весна</td> </tr>
<tr class="lev3"> <td>30.06.2013</td> <td>Конец 2-го квартала</td> <td>Лето</td> </tr>
<tr class="lev3"> <td>01.10.2013</td> <td>Начало 4-го квартала</td> <td>Осень</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2012</a></label></td> </tr>
<tr class="lev3"> <td>А здесь</td> <td>ничего</td> <td>нет</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>

<tr class="lev1"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Нормальные герои</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">всегда идут в обход</a></label></td> </tr>
<tr class="lev3"> <td>Ходы</td> <td>кривые роет подземный умный крот.</td> <td>Нормальные</td> </tr>
<tr class="lev3"> <td>герои</td> <td>всегда идут в обход. Нормальные герои всегда идут</td> <td>в обход.</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Смайлики с SQL.ru</a></label></td> </tr>
<tr class="lev3"> <td>&#160;</td> <td><a href="http://www.sql.ru/forum/actualutils.aspx?action=gotomsg&tid=394314&msg=7343885">Здесь</a></td> <td>&#160;</td> </tr>
<tr class="lev3"> <td>&#160;</td> <td>&#160;</td> <td>&#160;</td> </tr>
</table>
</body>

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

function ShowOnLoad(idx) {
	var tbl = document.getElementById(idx);
	for (i=1; i<3; i++) {ShowLevel(tbl.rows[i],i);}
}
</script>
</html>

...
Рейтинг: 0 / 0
16.08.2014, 16:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721782
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Это просто охрененно!
Спасибо огромное.!
...
Рейтинг: 0 / 0
16.08.2014, 18:24
| Ответить | Цитировать | Написать  
Tree Table CSS
    #38721783
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
7Lexususer89,

Спасибо огромное.!

 
=И ещё...mssasha@rambler.ru - если "спасибо" - это мало
...
Рейтинг: 0 / 0
16.08.2014, 18:56
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Tree Table CSS
    #39034428
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user897Lexus,
 
так?
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
.treetable {
	border-collapse:collapse;
	table-layout:fixed;
	width:700px;
}
.treetable th {display:none;}
.treetable td {
	padding:3px;
	border:1px solid #D3D3D3;
}
.treetable label a{
	cursor:pointer;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:16px;
}
.treetable tr {display:none;}
.treetable .lev1 {
	background:#6E9ECA;
	display:table-row;
}
.lev2 {background:#708090;}
.lev2 td:first-child {padding-left:10px;}
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;
}
</style>
</head>
<body onload="ShowOnLoad('MyTable')">
<button onclick="SwapAll(false);">Свернуть все</button></a>
<button onclick="SwapAll(true);">Развернуть все</button></a>
<br><br>
<table class="treetable" id="MyTable">
<col width=84><col width=480>
<thead>
	<tr><th></th> <th></th> <th></th> <th></th> <th></th> </tr>
</thead>
<tr class="lev1"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">Отчеты</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox" checked><a onclick="sh(this)">2014</a></label></td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Защитить Исследовательский центр Парения</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>23.01.2014</td> <td>Освободить Комплекс по добыче воды</td> <td>Империя</td> </tr>
<tr class="lev3"> <td>24.05.2014</td> <td>Уничтожить дессикатор</td> <td>Страж свободы</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2013</a></label></td> </tr>
<tr class="lev3"> <td>01.04.2013</td> <td>Начало 2-го квартала</td> <td>Весна</td> </tr>
<tr class="lev3"> <td>30.06.2013</td> <td>Конец 2-го квартала</td> <td>Лето</td> </tr>
<tr class="lev3"> <td>01.10.2013</td> <td>Начало 4-го квартала</td> <td>Осень</td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">2012</a></label></td> </tr>
<tr class="lev3"> <td>А здесь</td> <td>ничего</td> <td>нет</td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>

<tr class="lev1"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Нормальные герои</a></label></td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">всегда идут в обход</a></label></td> </tr>
<tr class="lev3"> <td>Ходы</td> <td>кривые роет подземный умный крот.</td> <td>Нормальные</td> </tr>
<tr class="lev3"> <td>герои</td> <td>всегда идут в обход. Нормальные герои всегда идут</td> <td>в обход.</td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>
<tr class="lev2"> <td colspan=3><label><input type="checkbox"><a onclick="sh(this)">Смайлики с SQL.ru</a></label></td> </tr>
<tr class="lev3"> <td> </td> <td><a href="http://www.sql.ru/forum/actualutils.aspx?action=gotomsg&tid=394314&msg=7343885">Здесь</a></td> <td> </td> </tr>
<tr class="lev3"> <td> </td> <td> </td> <td> </td> </tr>
</table>
</body>

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

function ShowOnLoad(idx) {
	var tbl = document.getElementById(idx);
	for (i=1; i<3; i++) {ShowLevel(tbl.rows[i],i);}
}
</script>
</html>



user89,
Этот битрикс ломает код.
и всё из-за этой строчки (всё дело в body)

Код: html
1.
<body onload="ShowOnLoad('MyTable')">



Можно ли как-то сделать, чтобы было без слова body?
...
Рейтинг: 0 / 0
22.08.2015, 20:07
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39034441
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
7Lexus,

можно через тег script , в самый конец документа, типа такого
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<body>
  ...

<script>
  ShowOnLoad('MyTable');
</script>
</body>
</html>
...
Рейтинг: 0 / 0
22.08.2015, 21:45
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39034450
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Можно еще через попробовать через window onload


Я тут малость улучшил свои разработки по таблицам, может чего и пригодится...
Древовидная группирующая таблица, вариант 3
Hint подсказка всплывает, если текст не помещается в ячейке
Таблица. Фиксированный заголовок, столбец.
...
Рейтинг: 0 / 0
22.08.2015, 22:15
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39039649
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Ну всё оказывается просто.
Скрипт в конце кода решил проблему.
Спасибо.

Теперь заинтересовала тема фиксации строк и столбцов. Однако, неплохо.

Спасибо, что делаете благое дело для нас.
...
Рейтинг: 0 / 0
31.08.2015, 12:10
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39040107
Фёдор К
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Фёдор К
Гость
user89...
Сделал еще вариант древовидной таблицы http://jsfiddle.net/NZaw4/10
...)
Лучше изменить стиль
Код: css
1.
2.
3.
4.
input[type="checkbox"]
{
     display: none;
}

на
Код: css
1.
2.
3.
4.
label input[type="checkbox"]
{
     display: none;
}

иначе другие чекбоксы исчезают.
...
Рейтинг: 0 / 0
01.09.2015, 01:06
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39040262
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Фёдор К,

в общем, да. Просто я давно не использую стандартные Button, CheckBox, RadioButton. Каждый браузер отображает их по своему, да и располагает на экране криво. Во всех проектах я им ставлю display:none; и рисую через background
 
Самодельный Checkbox
Код: 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.
<!DOCTYPE HTML>
<html>
<head>
<title>Самодельный Checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {font:11px Verdana,Arial;}
input[type="checkbox"] {display:none;}
input[type="checkbox"] + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
input[type="checkbox"]:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
</style>
</head>
<body>
<br>
<label><input type="checkbox" checked><span>Первый checkbox</span></label>
<br><br>
<label><input type="checkbox"><span>Второй checkbox</span></label>
<br><br>
<label><input type="checkbox"><span>Третий checkbox</span></label>
<br><br><br>
<a href="http://jsfiddle.net/g78oh3cu/2/" target="_blank">http://jsfiddle.net/g78oh3cu/2/</a>
</body>
</html>

 
Самодельный Radiobutton
Код: 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.
<!DOCTYPE html>
<html>
<head>
<title>Самодельный Radiobutton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {font:11px Verdana,Arial;}
input[type="radio"] {display:none;}
input[type="radio"] + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAA6UlEQVR42nWS74qCQBTFff21p/AZ+lLLCpsERSkumaAMgR/8IAUl+AB3+R2YoTZ34DB6zzn3z8xE0dNKksTixeIFxKK59RHHtlqvrW1bG8dR4JsY3Js4yzK73m623R1tuUqF3aFQDC6YKEmWYRgk+vre2r44CZj5x4RG7eF0zolMs72Exc/Z6saZu3RWVZWARlUYjH7JjrCqG5F936sqKMtSGrTB8JlulLXrOonu90cACdiDgYDP7sXTNAn0TwyNDH5oiDzPVcEbqEycPQz9fKwQGHz/3vhyrHMX59uhjdmL++9pIPz7NH4B18qNZO9hj3YAAAAASUVORK5CYII=') no-repeat 0 1px;
}
input[type="radio"]:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABUElEQVR42mNgQALTFyz9n9k67X9oywIwBrFBYgzYQErL9P99247/33Pnyf9bX7+DMYgNEgPJYSieffD8/0uff/6fePrN/6R5x8AYxAaJgeTgmkBWgkw59+Hn/9RFp/+ruif+d02u/G8SmP5f1j4SLAaSA6kBOw/kTpDVINOUnWP+z955+v+Lb3//1z19+1/ENfm/jG34/xmX3oHVgNQygDwHcm/krD3/9b3i/m/4+vN/8b9//w1P/vsvs/LTf3Ej9//ZC/aD1YDUomgASWqu//hf/fC//7J7//0XXPgRLFa55MD/65+//g9vnvufIaN1OtxJIOtBzgAp5Jn/6T+PUxpYbO99iJNAasGenrD9BNhjGavOghWIG3uCMYgN8hPIBSA18DhBDtZ1N9/8790ElNx28v+xR2//3/mOFqzIcQEyBWQ1SBEIg9ggMQzFpCQNAK7TVNaTo7+RAAAAAElFTkSuQmCC') no-repeat 0 1px;
}
</style>
</head>
<body>
<br>
<label><input type="radio" name="r1"><span>Первый radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1"><span>Второй radiobutton</span></label>
<br><br>
<label><input type="radio" name="r1" checked><span>Третий radiobutton</span></label>
</body>
</html>

 
Самодельный Combobox
Код: 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.
<!DOCTYPE html>
<head>
<title>Самодельный Combobox</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
* {margin:0; padding:0;}
.Combobox {
  background:#fff;
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
}
.Combobox .DivForInput {
  margin:0;
  padding:0 0 0 4px;
  height:19px;
  overflow:hidden;
  border:1px solid #B5B8C8;
}
.Combobox .DivForInput input {
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
  margin:0; padding:0; border:0;
  outline:none;
  height:19px;
  line-height:18px;
  float:left;
}
.cmdList {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
  width:18px;
  height:20px;
  cursor:pointer;
  float:right;
}
.Combobox .ComboCont {position:absolute;  margin-top:-9999px;}
.Combobox .ComboFocused {
  display:block;
  position:absolute;
  margin-top:-1px;
  z-index:2;
  background:#fff;
  border:1px solid #B5B8C8;
  outline:none;
}
.Combobox .ComboFocused div {padding:4px 4px;}
.Combobox .ComboFocused div:hover {background:#ECF3FC;}
</style>
</head>

<body>
<button style="margin:20px;" onclick="run();">Сделать выпадающие списки</button>

<table><tr>
  <td style="width:20px;"></td>
  <td> <div class="Combobox">Исполнение,Поддержка,Управление карьерой подчинённых,Участие в наборе персонала</div> </td>
  <td style="width:50px;"></td>
  <td> <div class="Combobox" id="cbo1">a > b,a < b,a & b</div> </td>
</tr></table>

<script>
function InitCombobox() {
  var d = document.getElementsByClassName('Combobox');
  for (i=0; i < d.length; i++) {
    var s = '<div class="DivForInput"> <input type="text"> <div class="cmdList" onclick="ShowComboBox(this);"></div> </div>' +
    '<div class="ComboCont" onblur="this.className=\'ComboCont\';">';
    var arr = d[i].innerHTML.split(',');
    for (j=0; j < arr.length; j++) {s = s + '<div onclick="SetComboText(this);">' + arr[j] + '</div>';}
    s = s + '</div>';
    d[i].innerHTML = s;
    d[i].children[0].style.width = d[i].offsetWidth - 4 + 'px';    
    d[i].children[0].children[0].style.width = d[i].offsetWidth - 25 + 'px';
    d[i].children[1].style.minWidth = d[i].offsetWidth -2 + 'px';
  }
}
function SetComboText(el) {
  el.parentNode.parentNode.children[0].children[0].value = el.innerHTML.replace(/&amp;/gi,'&').replace(/&gt;/,'>').replace(/&lt;/,'<');
  el.parentNode.className = 'ComboCont';
}

function ShowComboBox(el) {
  el = el.parentNode.parentNode.children[1];
  el.className = 'ComboFocused';
  el.tabIndex = '-1';  el.focus();
}
function SetItemIndex(el,idx) {el.children[1].children[idx].click();}


function run() {
  InitCombobox();
  SetItemIndex(document.getElementById('cbo1'),2); // Установим 3-й элемент списка (нумерация с нуля)"
}
</script>
</body>
</html>

 
Самодельный CheckCombobox
Код: 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.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CheckCombobox</title>
<style>
.CheckCombobox, .CheckCombobox div, .CheckCombobox input {
  background-color:#fff;
  font:11px Verdana,Arial,'MS Sans Serif','sans-serif';
  margin:0; padding:0;
  box-sizing:border-box;
  position:absolute;
}
.CheckCombobox {
  width:210px; height:22px;
  border:1px solid #B5B8C8;
  position:relative;
}
.CheckCombobox .divJoinString {
  border:0;
  top:0; left:2px; bottom:2px;
  line-height:19px;
  overflow:hidden;
}
.CheckCombobox .cmdExpandList {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
  width:18px; height:20px;
  cursor:pointer;
  top:0; right:0;
}
.CheckCombobox .ChkBoxFocused {
  display:block;
  left:-1px;
  z-index:2;
  border:1px solid #B5B8C8;
  outline:none;
}
.CheckCombobox .search {
  display:block;
  font-style:italic;
  width:100%; height:19px; padding:2px;
  border:0; outline:none;
  border-bottom:1px solid #eee;
}
.CheckCombobox .CheckTable {
  border-collapse:collapse;
  position:absolute;
}
.CheckCombobox td {
  padding:5px !important;
  white-space:nowrap;
}
.CheckCombobox input {display:none;}
.CheckCombobox input + span {
  padding-left:16px;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
.CheckCombobox input:checked + span {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
.noDisplay {left:-999999px;} /* Есть глюк в Мозилле, почему-то display:none срабатывает при щелчке в любой input, поэтому делаем большой отрицательный отступ */

#t1 td{padding:7px 2px;}
</style>
</head>
<body>
<table id="t1">
  <tr>
    <td>Широкий список, вертикальная прокрутка</td>
    <td> <div class="CheckCombobox" id="chkBox1">Строка 1&#2;Строка 2&#2;Длинное название, состоящее из многих слов&#2;Управление карьерой подчинённых&#2;Участие в наборе персонала&#2;Некий пункт 1&#2;Некий пункт 2&#2;Некий пункт 3&#2;Некий пункт 4&#2;Некий пункт 5</div> </td>
  <tr>
    <td> <button onclick="SelectItemsChk(gid('chkBox2'),'Пункт 4Пункт 1', '');">Выделить часть пунктов программно</button> </td>
    <td> <div class="CheckCombobox" id="chkBox2">Пункт 1&#2;Пункт 2&#2;Пункт 3&#2;Пункт 4</div> </td>
  </tr>
  <tr>
    <td> <button onclick="SelectAllChk(gid('chkBox3'));">Выделить все пункты программно</button> </td>
    <td> <div class="CheckCombobox" id="chkBox3">1&#2;2&#2;3</div> </td>
  </tr>
</table>

<script>
function gid(idx) {return document.getElementById(idx);}
function CEL(s) {return document.createElement(s);}
function ACH(p,c) {p.appendChild(c);}

function getScrollWidth() {
  var dv = CEL('div');
  dv.style.overflowY = 'scroll'; dv.style.width = '50px'; dv.style.height = '50px'; dv.style.position = 'absolute';
  dv.style.visibility = 'hidden';//при display:none размеры нельзя узнать. visibility:hidden - сохраняет геометрию, а выше было position=absolute - не сломает разметку
  ACH(document.body,dv);
  var sw = dv.offsetWidth - dv.clientWidth;
  document.body.removeChild(dv);
  return (sw);
}
var ScrollWidth = getScrollWidth();


function InitCheckCombobox(separator) {
  var d = document.getElementsByClassName('CheckCombobox');
  for (var i=0; i < d.length; i++) {
    var cmdExpandList = CEL('div'), divJoinString = CEL('div'); search = CEL('input'); tbl = CEL('table'); chkBox = CEL('div');//тот самый выпадающий список
    var arr = d[i].innerHTML.split(separator);
    d[i].innerHTML = '';

    cmdExpandList.className = 'cmdExpandList';
    cmdExpandList.onclick = ShowChkBox;
    ACH(d[i],cmdExpandList);

    divJoinString.className = 'divJoinString'; divJoinString.style.right = cmdExpandList.offsetWidth + 3 + 'px';
    ACH(d[i],divJoinString);

    search.className = 'search'; search.setAttribute('placeholder', 'Быстрый поиск по фрагменту...'); search.onkeyup = RunFilter;

    tbl.className = 'CheckTable';
    var NewCell = tbl.insertRow(-1).insertCell(-1);
    NewCell.innerHTML = '<label><input type="checkbox"><span>(Выделить всё)</span></label>';
    NewCell.children[0].children[0].onclick = SelectAll;
    for (var j=0; j<arr.length; j++) {
      NewCell = tbl.insertRow(-1).insertCell(-1);
      NewCell.innerHTML = '<label><input type="checkbox"><span>' + arr[j] + '</span></label>';
      NewCell.children[0].children[0].onclick = GetJoinStringChk;
    }
    chkBox.className = 'noDisplay';
    var st = chkBox.style;
    st.top = d[i].offsetHeight - 2 + 'px'; st.minWidth = d[i].offsetWidth + 'px';  st.maxHeight = '243px';
    st.overflowY = 'auto'; st.overflowX = 'hidden';

    ACH(chkBox,search);
    ACH(chkBox,tbl);
    ACH(d[i],chkBox);

    tbl.style.top = search.offsetHeight + 2 + 'px';
    st.height = search.offsetHeight + tbl.offsetHeight + 4 + 'px';
    st.width = tbl.offsetWidth + ScrollWidth + 'px';

    // Добавим события к выпадающему списку
    chkBox.addEventListener('focus', onChkBoxFocus, true);
    chkBox.addEventListener('blur', onChkBoxBlur, true);
  }//for (i=0; i < d.length; i++) закончили перебор всех DIV с классом CheckCombobox

  function ShowChkBox() {
    var el = this.parentNode.children[2];
    el.className = 'ChkBoxFocused';
    el.tabIndex = '-1';  el.focus();
    el.children[0].value = '';

    var rows = el.children[1].rows, len = rows.length;
    for (var i=1; i<len; i++) {rows[i].style.display = 'table-row';}
  }

  function onChkBoxFocus() {this.className = 'ChkBoxFocused';}
  function onChkBoxBlur() {this.className = 'noDisplay';}

  function RunFilter(event) {
    var text = this.value.toUpperCase();
    var rows = this.nextSibling.rows, len = rows.length, TD_txt = '';
    if ((event.keyCode < 32) && (event.keyCode != 8)) return;

    for (var i=1; i<len; i++) {
      TD_txt = rows[i].cells[0].innerHTML.toUpperCase();
      if (TD_txt.indexOf(text) != -1) {rows[i].style.display = 'table-row';}
      else {rows[i].style.display = 'none';}
    }
  }

  function SelectAll(event) {
    var rows = this.parentNode.parentNode.parentNode.parentNode.parentNode.rows;
    for (var j=1; j < rows.length; j++) {
      if (rows[j].style.display=='table-row') {rows[j].cells[0].children[0].children[0].checked = this.checked;}
    }
    GetJoinStringChk(event);
  }

  function GetJoinStringChk(event) {
    var chk = event.target, rows = chk.parentNode.parentNode.parentNode.parentNode.parentNode.rows, s = '';
    for (var j=1; j < rows.length; j++) {
      if (rows[j].cells[0].children[0].children[0].checked) {s = s + ',' + rows[j].cells[0].children[0].children[1].innerHTML};
    }
    chk.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.children[1].innerHTML = s.substring(1);
  }
} // InitCheckCombobox


function SelectAllChk(el) {
  el.children[0].click();
  el.children[2].children[1].rows[0].cells[0].children[0].children[0].click();
  el.children[2].blur();
}

function SelectItemsChk(el, str, separator) {
  var str = str.toUpperCase(), arr = str.split(separator), i=0, j=0;
  var rows = el.children[2].children[1].rows;
  for (i=0; i < arr.length; i++) {
    for (j=1; j < rows.length; j++) {
      if (rows[j].cells[0].children[0].children[1].innerHTML.toUpperCase() == arr[i]) {rows[j].cells[0].children[0].children[0].click()};
    }
  }
}


InitCheckCombobox('');
</script>
</body>
</html>

 
Самодельные кнопки
Код: 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.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
body {background:#dfe8f6;}
.cmdParams {
  border:1px solid #d1d1d1;
  border-radius:4px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:90px;
  padding:4px 5px;
  text-align:center;
  color:333333;
  background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.cmdParams:active {padding:5px 4px 3px 6px;}


.cmdParams2 {
  border:1px solid #999;
  border-radius:4px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:97px;
  padding:5px;
  text-align:center;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZmRmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ViZWJlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZmNmY2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.cmdParams2:active {padding:6px 4px 4px 6px;}

.GradCmd {
  display:table-cell;
  border:1px solid #999;
  border-radius:5px;
  font:8pt Tahoma,Arial,'MS Sans Serif','sans-serif';
  cursor:pointer;
  width:105px;
  padding:5px 1px;
  text-align:center;
  background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHZpZXdCb3g9JzAgMCAxIDEnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxsaW5lYXJHcmFkaWVudCBpZD0nR3JhZENtZCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJScgeTE9JzAlJyB4Mj0nMCUnIHkyPScxMDAlJz48c3RvcCBzdG9wLWNvbG9yPScjRkRGREZEJyBvZmZzZXQ9JzAnLz48c3RvcCBzdG9wLWNvbG9yPScjRDFEMUQxJyBvZmZzZXQ9JzEnLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9J3VybCgjR3JhZENtZCknLz48L3N2Zz4=);
}
.GradCmd:active {padding:6px 0px 4px 2px;}
</style>
<body>
<div style="margin:50px 200px;">
  <div class="cmdParams">Unigui button</div>
</div>
<div style="margin:50px 200px;">
  <div class="cmdParams2">Просмотр отчета</div>
</div>
<div style="margin:50px 200px;">
  <div class="GradCmd">Просмотр отчета</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
01.09.2015, 10:36
| Ответить | Цитировать | Написать  
Tree Table CSS
    #39049993
7Lexus
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
7Lexus
Гость
user89,

Кнопки хороши!
...
Рейтинг: 0 / 0
12.09.2015, 18:19
| Ответить | Цитировать | Написать  
45 сообщений из 45, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Tree Table CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1445738]:
 0ms
get settings:
 6ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 63ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 84ms
get tp. blocked users:
 1ms
others: 205ms
total:  393ms
созд. / загр.: 393ms
x
x
Закрыть


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