Показать сообщение отдельно
  #3 (permalink)  
Старый 05.04.2015, 17:03
Новичок на форуме
Отправить личное сообщение для scrapmetal Посмотреть профиль Найти все сообщения от scrapmetal
 
Регистрация: 22.03.2015
Сообщений: 6

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Home Work</title>
<style>
		table, td {
			border: 3px solid black;
		}
		td {
			width:300px;
			height: 500px;
		}
		table {
			border-collapse: collapse;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -303px;
			margin-top: -252px;
		}
		form[name="addElement"] {
			text-align: center;
			margin-top: -120px;
		}
		form[name="listElements"] {
			margin-left: 100px;
			margin-top: -250px;
			position: absolute;
		}
		p#text, form[name="listElements"] {
			font-size: 18px;
		}
	</style>

<script>
		window.onload = function () {
			var addElement = document.forms.addElement;
			var listElements = document.forms.listElements;
			var main = document.getElementById("main");
			addElement.createElement.onclick = function () {
				var newElement = addElement.elements["newElement"].value;
				var newInput = document.createElement("input");
				var newSpan = document.createElement("span");
				var newP = document.createElement("p");
				newInput.type = "checkbox";
				var t = document.createTextNode(newElement);
				newSpan.appendChild(t);
				main.appendChild(newP);
				newP.appendChild(newInput);
				newP.appendChild(newSpan);
			}
			
			var inputs = document.getElementsByTagName("input");
			var spans = document.getElementsByTagName("span");
			var ps = document.getElementsByTagName("p");
			for (var i = 0; i < listElements.length; i++) {
				listElements.elements[i].onclick = function () {
					for (var j = 0; j < listElements.length; j++) {
						if ((listElements.elements[j].checked) && (listElements.length > 1)) {
							inputs[j].parentNode.removeChild(inputs[j]);
							spans[j].parentNode.removeChild(spans[j]);
						}
						else if (listElements.length == 1) 
							alert("Последний элемент не удаляется !!!");
					}
				}
			}		
		}
	</script>

<body>
	<table>
		<tr>
			<td>
				<form name="listElements" id="main">
					<p>Перечень позиций</p>
					<p>
						<input type="checkbox" /><span>элемент 1</span>
					</p>
					<p>
						<input type="checkbox" /><span>элемент 2</span>
					</p>
					<p>
						<input type="checkbox" /><span>элемент 3</span>
					</p>
					<p>
					<input type="checkbox" /><span>элемент 4</span>
					</p>
				</form>
			</td>
			<td>
				<form name="addElement">
					<p id="text">Новая позиция</p>
					<p>
						<input type="text" name="newElement" />
					</p>
					<input type="button" name="createElement" value="добавить" />
				</form>
			</td>
		<tr>
	</table>
</body>
</html>
Ответить с цитированием