Добавление узлов - HTML и CSS

jOBER · 09.07.2019, 20:41

Здравствуйте скажите пожалуйста, как сделать чтоб было добавление через функцию. У меня есть три класса container, row, div1. Вопрос такой, как сделать, чтоб можно было не писать вручную, а через цикл. Потому что количество элементов может измениться

Код:

<div class="container" >
      <div class="row" id="row0"  > <!-- Первая строка -->
        <div id="00" class="div1" data-col="0" data-row="0" onclick="divbackcolor(this.id)">11</div>
        <div id="01" class="div1" data-col="1" data-row="0" onclick="divbackcolor(this.id)">21</div>
        <div id="02" class="div1" data-col="2" data-row="0" onclick="divbackcolor(this.id)">31</div>
      </div>
      <div class="row" id="row1"><!-- Вторая строка -->
        <div id="10" class="div1" data-col="0" data-row="1" onclick="divbackcolor(this.id)">21</div>
        <div id="11" class="div1" data-col="1" data-row="1" onclick="divbackcolor(this.id)">22</div>
        <div id="12" class="div1" data-col="2" data-row="1" onclick="divbackcolor(this.id)">23</div>   
      </div>
</div>

web-coder · 09.07.2019, 20:52

Функция нужна на PHP?
Количество блоков .div1 в каждой строке одинаковое?

jOBER · 09.07.2019, 21:12

На js. Количество блоков одинаково. Виде массива n*m

Цитата:

Сообщение от web-coder

Функция нужна на PHP?
Количество блоков .div1 в каждой строке одинаковое?

web-coder · 10.07.2019, 19:26

Зачем массив? Если блоки однотипные, то можно просто указать количество n и m.

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="container" id="container"></div>
	<script>
		/**
		 * Генерируем разметку строк
		 * n - количество строк
		 * m - количество ячеек в строке
		 */
		function getRows(n, m){
			var res = '';
			for (var i = 0; i < n; i++) {
				res += '<div class="row" id="row'+i+'">';
				for (var u = 0; u < m; u++) {
					res += '<div id="'+i+u+'" class="div1" data-col="'+u+'" data-row="'+i+'" onclick="divbackcolor(this.id)">'+(i+1)+(u+1)+'</div>';
				}
				res += '</div>';
			};
			return res;
		}

		var rows = getRows(2, 2);
		// вставляем сгенерированную разметку в блок с id="container"
		document.getElementById('container').innerHTML = rows; 
	</script>
</body>
</html>

jOBER · 13.07.2019, 20:08

Спасибо большое.

Цитата:

Сообщение от web-coder

Зачем массив? Если блоки однотипные, то можно просто указать количество n и m.

09.07.2019, 20:52	#2
web-coder Пользователь Регистрация: 27.05.2019 Сообщений: 70	Функция нужна на PHP? Количество блоков .div1 в каждой строке одинаковое? Лучший сервис выбора хостинга по параметрам. Более 600 тарифов. Есть промокоды!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Количество узлов в ip-адресе	Алексей_2012	Помощь студентам	7	25.05.2013 21:43
Поиск узлов TreeView1	Афанасий[vedma]	Компоненты Delphi	1	07.11.2011 02:10
удаление узлов из дерева	ArniLand	Общие вопросы по Java, Java SE, Kotlin	0	22.09.2010 21:36
Добавление узлов в XML в Delphi, исользуя Treeview	Анастасия999	Помощь студентам	0	08.05.2010 10:05
Поиск узлов в TreeView	Ko$tello	Компоненты Delphi	1	14.11.2006 17:18