нужен JS для повторяещегося события - JavaScript, Ajax

dittor · 13.10.2019, 22:05

Здравствуйте!
Помогите с написанием скрипта. Я в JS полный "0". Только начал изучать азы.
Проблема в следующем:
Есть вот такой код:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content Type" content="text/html; charset=utf-8"; "Content-Language" Content="ru">
		<title>пробник</title>
		<style type="text/css">
		
			input[id^="spoiler"]{display: none;}
			input[id^="spoiler"] + label{display: block; margin: 0 auto; cursor: pointer; transition: all; color: #000000; }
			input[id^="spoiler"]:checked + label{color: blue;}
			input[id^="spoiler"] ~ .spoiler{height: 0; overflow: hidden; opacity: 0; transition: all}
			input[id^="spoiler"]:checked + label + .spoiler{ height: auto; opacity: 1}
			 
			table{width: 80%; background-color: #FFFFFF; font-family: calibri, Times New Roman, Arial; font-size: 14px;}
			table tr td{text-align: left}
			table tr td+td{text-align: center}
			table tr td+td+td+td{width: 10%; text-align: right; background-color: #FFCC00;}
			#stl{text-align: center; background-color: #33CC66}
			#stl1{text-align: center; background-color: #00CC99}
		
			/*стиль input*/
			#num{background: #FFCC00; outline: none; height: auto; width: 6em;
					color: #000000; text-align: right; font-size: 15px;	font-family: comic sans ms;}
					
			/*стиль кнопки*/		
			#push {display: inline-block; text-shadow: 1px 1px #fff; text-decoration: none; padding: .1em .5em; 
					border: 1px solid #aaa; border-radius: 100px; outline: none; background: #d6dbbf no-repeat;
					background-image: linear-gradient(to left, #aaa, #aaa),
										linear-gradient(to left, #feffe8, #feffe8),
										linear-gradient(#feffe8, #d6dbbf);
					background-position: calc(100% - 1.7em) 0, calc(100% - 1.7em + 1px) 0, 0 0; 
					background-size: 1px 100%, 1px 100%, auto auto; overflow: hidden;}
			#push:after {content: "\bb"; position: relative; bottom: 0; display: inline-block; margin-left: 1.4em;
							vertical-align: middle; font-family: Times New Roman, serif, sans-serif;
							font-weight: 700; font-size: 90%; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
			#push:hover {background-color: #fdfd9f;
							background-image: linear-gradient(to left, #aaa, #aaa),
												linear-gradient(to left, #feffe8, #feffe8),
												linear-gradient(#fffce7, #fdfd9f);}
			#push:active:after {bottom: -1.2em; transition: .3s;}
		
		</style>
		</head>
	<body>
		<input type="checkbox" id="spoiler">
		<label for="spoiler">
			<table border="1" align="center">
				<tr>
					<td id="stl1">блок 1</td>
				</tr>
			</table>
		</label>
		<div class="spoiler">
			<table border="1" align="center">  
				<tr>
					<td>текст</td> 
					<td>00</td> 
					<td><p id="demo"></p></td>
					<td>
						<label class="number">
							<input type="number" name="num" id="num" min="0" max="1000" value="0"/>
						</label>
					</td>
					<td>
						<button id="push" width="110px">сохранить</button>
					</td>
				</tr>
				<tr>
					<td>текст</td> 
					<td>00</td> 
					<td><p id="demo"></p></td>
					<td>
						<label class="number">
							<input type="number" name="num" id="num" min="0" max="1000" value="0"/>
						</label>
					</td>
					<td>
						<button id="push" width="110px">сохранить</button>
					</td>
				</tr>
			</table>
		</div>
		<input type="checkbox" id="spoiler01"> 
		<label for="spoiler01">
			<table border="1" align="center">
				<tr>
					<td id="stl1">блок 2</td>				
				</tr>
			</table>
		</label>
				<div class="spoiler">
			 <table border="1" align="center">	
				<tr>
					<td>текст</td> 
					<td>00</td>
					<td>00</td>
					<td>00</td>
					<td>00</td>
				</tr>
			</table>	
		</div>
		<!--скрипт кнопок "сохранить" размещать над </body>-->
		<script type="text/javascript">
		function kopir(){var x = document.getElementById('num').value; document.getElementById("demo").innerHTML = x}
		document.getElementById('push').addEventListener('click', kopir);
		</script>
	</body>
</html>

пример - https://jsfiddle.net/dittor/mtyhkLu1/3/
Количество блоков не ограничено, количество строк в блоках так же не ограниченно.
Создавать JS для каждой пары input-button отдельно(индивидуально) - не логично, глупо и проблематично.
Задача состоит в том , что бы один JS обрабатывал бы все пары input-button. Как это сделать я увы пока не знаю.
Помогите кто может и спасибо за оказанное внимание

Serge_Bliznykov · 14.10.2019, 09:49

во-первых, начнём с того, что данный HTML не валидный!

Цитата:

Код:

					<td><p id="demo"></p></td>
.....					<td>
						<button id="push" width="110px">сохранить</button>
					</td>
				</tr>
				<tr>
					<td>текст</td> 
					<td>00</td> 
					<td><p id="demo"></p></td>
.....
					<td>
						<button id="push" width="110px">сохранить</button>
					</td>

в документе не может быть двух элементов с одинаковым ID
ID - это ИДЕНТИФИКАТОР.

http://htmlbook.ru/html/attr/id

Цитата:

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

во-вторых, я лично не понял вопрос:

Цитата:

Сообщение от dittor

Задача состоит в том , что бы один JS обрабатывал бы все пары input-button.

что за пары и что с ними нужно сделать на JS ?

dittor · 14.10.2019, 19:36

С Id я понял, исправлю.

Цитата:

Сообщение от Serge_Bliznykov

во-вторых, я лично не понял вопрос:

что за пары и что с ними нужно сделать на JS ?

при нажатии кнопки сохранить во второй ячейке выводится значения введенное в третью ячейку

Serge_Bliznykov · 15.10.2019, 10:13

Цитата:

Сообщение от dittor

при нажатии кнопки сохранить во второй ячейке выводится значения введенное в третью ячейку

так?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content Type" content="text/html; charset=utf-8"; "Content-Language" Content="ru">
		<title>пробник</title>
		<style type="text/css">
		
			input[id^="spoiler"]{display: none;}
			input[id^="spoiler"] + label{display: block; margin: 0 auto; cursor: pointer; transition: all; color: #000000; }
			input[id^="spoiler"]:checked + label{color: blue;}
			input[id^="spoiler"] ~ .spoiler{height: 0; overflow: hidden; opacity: 0; transition: all}
			input[id^="spoiler"]:checked + label + .spoiler{ height: auto; opacity: 1}
			 
			table{width: 80%; background-color: #FFFFFF; font-family: calibri, Times New Roman, Arial; font-size: 14px;}
			table tr td{text-align: left}
			table tr td+td{text-align: center}
			table tr td+td+td+td{width: 10%; text-align: right; background-color: #FFCC00;}
			#stl{text-align: center; background-color: #33CC66}
			#stl1{text-align: center; background-color: #00CC99}
		
			/*стиль input*/
			.numclass{background: #FFCC00; outline: none; height: auto; width: 6em;
					color: #000000; text-align: right; font-size: 15px;	font-family: comic sans ms;}
					
			/*стиль кнопки*/		
			.push {display: inline-block; text-shadow: 1px 1px #fff; text-decoration: none; padding: .1em .5em; 
					border: 1px solid #aaa; border-radius: 100px; outline: none; background: #d6dbbf no-repeat;
					background-image: linear-gradient(to left, #aaa, #aaa),
										linear-gradient(to left, #feffe8, #feffe8),
										linear-gradient(#feffe8, #d6dbbf);
					background-position: calc(100% - 1.7em) 0, calc(100% - 1.7em + 1px) 0, 0 0; 
					background-size: 1px 100%, 1px 100%, auto auto; overflow: hidden;
					width:110px;}
			.push:after {content: "\bb"; position: relative; bottom: 0; display: inline-block; margin-left: 1.4em;
							vertical-align: middle; font-family: Times New Roman, serif, sans-serif;
							font-weight: 700; font-size: 90%; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
			.push:hover {background-color: #fdfd9f;
							background-image: linear-gradient(to left, #aaa, #aaa),
												linear-gradient(to left, #feffe8, #feffe8),
												linear-gradient(#fffce7, #fdfd9f);}
			.push:active:after {bottom: -1.2em; transition: .3s;}
		
		</style>
		</head>
	<body>
		<input type="checkbox" id="spoiler">
		<label for="spoiler">
			<table border="1" align="center">
				<tr>
					<td id="stl1">блок 1</td>
				</tr>
			</table>
		</label>
		<div class="spoiler">
			<table border="1" align="center">  
				<tr>
					<td>текст</td> 
					<td>00</td> 
					<td><p id="demo1"></p></td>
					<td>
						<label class="number">
							<input type="number" class="numclass" name="num1" id="num1" min="0" max="1000" value="0"/>
						</label>
					</td>
					<td>
						<button class="push" id="push1" data-id="1">сохранить</button>
					</td>
				</tr>
				<tr>
					<td>текст два</td> 
					<td>00</td> 
					<td><p id="demo2"></p></td>
					<td>
						<label class="number">
							<input type="number" class="numclass" name="num2" id="num2" min="0" max="1000" value="0"/>
						</label>
					</td>
					<td>
						<button class="push" id="push2" data-id="2">сохранить</button>
					</td>
				</tr>
				<tr>
					<td>текст третий</td> 
					<td>00</td> 
					<td><p id="demo3"></p></td>
					<td>
						<label class="number">
							<input type="number" class="numclass" name="num3" id="num3" min="0" max="1000" value="0"/>
						</label>
					</td>
					<td>
						<button class="push" id="push3" data-id="3">сохранить</button>
					</td>
				</tr>
			</table>
		</div>
		<input type="checkbox" id="spoiler01"> 
		<label for="spoiler01">
			<table border="1" align="center">
				<tr>
					<td id="stl1">блок 2</td>				
				</tr>
			</table>
		</label>
				<div class="spoiler">
			 <table border="1" align="center">	
				<tr>
					<td>текст</td> 
					<td>00</td>
					<td>00</td>
					<td>00</td>
					<td>00</td>
				</tr>
			</table>	
		</div>
		<!--скрипт кнопок "сохранить" размещать над </body>-->
		<script type="text/javascript">
		function kopir(){
			var idNum = this.dataset.id;
			if(idNum)
				document.getElementById("demo"+idNum).innerHTML = document.getElementById('num'+idNum).value;
		}

		var allbuttons = document.getElementsByClassName('push');
		for (var i=0; i<allbuttons.length; i++)
			allbuttons[i].addEventListener('click', kopir);
		</script>
	</body>
</html>

dittor · 15.10.2019, 20:49

Спасибо большое! Вроде работает.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
События	UtyOmOk	C# (си шарп)	11	07.01.2019 11:51
события и Asp.net mvc	ts-alan	ASP.NET	3	15.12.2015 14:28
События в WPF. Обращение к компонентам формы из события	Casper-SC	Общие вопросы .NET	3	25.07.2010 19:03
События	session	Общие вопросы C/C++	2	21.06.2010 17:16
События	yarilo	JavaScript, Ajax	3	28.01.2010 23:18

15.10.2019, 20:49	#5
dittor Регистрация: 07.10.2019 Сообщений: 5	Спасибо большое! Вроде работает.