Динамические дивы

@Noob Progaramm · Регистрация: 20.10.2015

Студворк — интернет-сервис помощи студентам

(Туда ли я пишу, не знаю)
Привет, народ. Есть у меня страничка с двумя скриптами, которые создают дивы. Как мне модернизировать скрипты, чтобы при нажатии на Add COL в новом столбце появлялось столько же дивов, сколь есть рядков и наоборот

HTML5
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
<html>
<head>
<style>
div
{
 
 width:200px;
 height:30px;
 border: solid #000;
}
</style>
</head>
<body> 
<script>
function r(el)
{
var num=parseInt((el.id.substr(1)))+1;
var rez=el.parentNode.insertBefore(document.createElement("DIV"), el),
rez.id="c"+num;
rez.style.float="left";
rez.style.zIndex=parseInt(el.style.zIndex)+1;
    
}
function f(el)
{
var num=parseInt((el.id.substr(1)))+1;
var rez=el.parentNode.insertBefore(document.createElement("DIV"), el);
rez.id="i"+num;
rez.style.left=parseInt(el.style.left)-5+"px";
rez.style.zIndex=parseInt(el.style.zIndex)+1;
 
}
</script>
    
<div id="i0" style="left:200; top:20; z-index:5;"><textarea></textarea></div>
<button id="i0" onclick="f(this)">Add ROW</button>
<button id="c0" onclick="r(this)">Add COL</button>    
</body>
</html>

@dzendev · 14.04.2016, 18:05

Непонятно что Вы хотите сделать. Можно какую картинку...
Плюс ошибка rez.id="c"+num; SyntaxError: missing ; before statement

Добавлено через 4 минуты
Да и в самом html ошибка

HTML5
1
2
<div id="i0" style="left:200; top:20; z-index:5;"><textarea></textarea></div>
<button id="i0" onclick="f(this)">Add ROW</button>

id - значение айдишника должно быть уникальным, оно не должно повторяться на странице

@Noob Progaramm · 15.04.2016, 09:27 **[ТС]**

Там всё верно. Возможно что-то у вас не работает, но тот код, что я скинул работает без ошибок

Добавлено через 7 минут
Попробуйте этот код, раз тот не работает

HTML5
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
<html>
<head>
    <meta charset="utf-8">
<style>
div
{
 
 width:200px;
 height:30px;
 border: solid #000;
}
</style>
</head>
<body> 
<script>
 
 
    
function f(el)
{
var num=parseInt((el.id.substr(1)))+1;
var rez=el.parentNode.insertBefore(document.createElement("DIV"), el);
rez.id="i"+num;
rez.style.left=parseInt(el.style.left)-5+"px";
rez.style.zIndex=parseInt(el.style.zIndex)+1;
 
}
    function r(el)
    {
var num=parseInt((el.id.substr(1)))+1;
var rez=el.parentNode.insertBefore(document.createElement("DIV"), el);
rez.id="i"+num;
rez.style.float = "left";
rez.style.zIndex=parseInt(el.style.zIndex)+1;
 
}
</script>
    
<div id="i0" style="left:200; top:20; z-index:5;"></div>
<button onclick="f(this)">Add ROW</button> 
    <button onclick="r(this)">Add ROW</button> 
</body>
</html>

@Noob Progaramm · 15.04.2016, 09:36 **[ТС]**

Вот картина, если поможет

При помощи таблиц делать - не вариант(в моём случае)

@dzendev · 15.04.2016, 11:26

Сообщение от Noob Progaramm

Там всё верно.

Первый вариант кода, 18 строчка - вместо запятой должно стоять ; Отсюда и появлялась ошибка.

Решение Вашей задачи

HTML5
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
        .wrap{
            display: table;
            width: 400px;
        }
        .row{
            display: table-row;
        }
        .cell{
            display: table-cell;
            width: 200px;
            vertical-align: top;
        }
        .block{
            width:200px;
            height: 50px;
            background: #404040;
        }
        .block:nth-child(odd) {
            background: #000;
        }
        button{
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var addDiv = document.getElementById('add-div');
            var addRow = document.getElementById("add-row");
            var cell1 = document.getElementById("cell1");
            var cell2 = document.getElementById("cell2");
 
            addDiv.onclick = function () {
                var div = document.createElement("div");
                div.setAttribute('class', 'block');
                cell1.appendChild(div);
            };
            addRow.onclick = function () {
                cell2.innerHTML = cell1.innerHTML;
            };
        };
    </script>
</head>
<body>
    <div class="wrap">
        <div class="row">
            <div class="cell" id="cell1"></div>
            <div class="cell" id="cell2"></div>
        </div>
    </div>
    <button id="add-div">Добавить див</button>
    <button id="add-row">Дублировать столбец</button>
</body>
</html>

@Noob Progaramm · 15.04.2016, 11:36 **[ТС]**

Моя Вам благодарность

Добавлено через 4 минуты
Только вот ещё одна просьба: можете дописать конструктор дива чтобы в нём ещё создавалось текстовое поле(именно textarea)?

Добавлено через 4 минуты
Хотя, подождите. А если я захочу создать 1000 столбцов? А у меня есть возможность создать только два столбца

@dzendev · 15.04.2016, 17:21

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload = function () {
            var addDiv = document.getElementById('add-div');
            var addRow = document.getElementById("add-row");
            var cell1 = document.getElementById("cell1");
            var cell2 = document.getElementById("cell2");
 
            addDiv.onclick = function () {
                var div = document.createElement("div");
                div.setAttribute('class', 'block');
                div.innerHTML = '<textarea name=""></textarea>'
                cell1.appendChild(div);
            };
            addRow.onclick = function () {
                cell2.innerHTML = cell1.innerHTML;
            };
        };

Сообщение от Noob Progaramm

А если я захочу создать 1000 столбцов?

Ну вот и подумайте как Вам это сделать

@Noob Progaramm · 15.04.2016, 17:27 **[ТС]**

К тому времени, как Вы ответили, я уже подумал как это сделать и у меня, к несчастью, ничего не вышло

@dzendev · 15.04.2016, 17:39

Не вижу результата Ваших размышлений в виде кода

@Noob Progaramm · 15.04.2016, 17:46 **[ТС]**

Ну а зачем публиковать то что никак не работает?)

Ну если Вам так интересно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
      window.onload = function () {
            var addDiv = document.getElementById('add-div');
            var addRow = document.getElementById("add-row");
            var cell1 = document.getElementById("cell1");
 
            addDiv.onclick = function () {
                var div = document.createElement("div");
                div.setAttribute('class', 'block');
                cell1.appendChild(div);
            };
            addRow.onclick = function () {
                var div = document.createElement("div");
                div.setAttribute('class', 'cell2');
                function (){
                    var cell2 = document.getElementById("cell2");
                    cell2.innerHTML = cell1.innerHTML;
                };
            };
        };

Тут я хотел, для начала, правый див создать динамически.
Как Вы уже заметили, я не особо силён в JS

@dzendev · 15.04.2016, 17:54

HTML5
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
        .wrap{
            display: table;
        }
        #row{
            display: table-row;
        }
        .cell{
            display: table-cell;
            width: 200px;
            vertical-align: top;
        }
        .block{
            width:200px;
            height: 50px;
            background: #404040;
        }
        .block:nth-child(odd) {
            background: #000;
        }
        button{
            display: block;
        }
    </style>
    <script>
        window.onload = function () {
            var addDiv = document.getElementById('add-div');
            var addCol = document.getElementById("add-col");
            var cell1 = document.getElementById("cell1");
            var row = document.getElementById("row");
 
            addDiv.onclick = function () {
                var div = document.createElement("div");
                div.setAttribute('class', 'block');
                div.innerHTML = '<textarea name=""></textarea>';
                cell1.appendChild(div);
            };
            addCol.onclick = function () {
                var divcell = document.createElement("div");
                divcell.setAttribute('class', 'cell');
                divcell.innerHTML = cell1.innerHTML;
                row.appendChild(divcell);
            };
        };
    </script>
</head>
<body>
    <div class="wrap">
        <div id="row">
            <div class="cell" id="cell1"></div>
        </div>
    </div>
    <button id="add-div">Добавить див</button>
    <button id="add-col">Дублировать столбец</button>
</body>
</html>

@Noob Progaramm · 15.04.2016, 17:56 **[ТС]**

Вооот, то что нужно) Спасибо)

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101
	15.04.2016, 09:36 [ТС]
	Вот картина, если поможет При помощи таблиц делать - не вариант(в моём случае) 0

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101
	15.04.2016, 11:36 [ТС]
	Моя Вам благодарность Добавлено через 4 минуты Только вот ещё одна просьба: можете дописать конструктор дива чтобы в нём ещё создавалось текстовое поле(именно textarea)? Добавлено через 4 минуты Хотя, подождите. А если я захочу создать 1000 столбцов? А у меня есть возможность создать только два столбца 0

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101
	15.04.2016, 17:27 [ТС]
	К тому времени, как Вы ответили, я уже подумал как это сделать и у меня, к несчастью, ничего не вышло 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	15.04.2016, 17:39
	Не вижу результата Ваших размышлений в виде кода 0

@Noob Progaramm 1 / 1 / 1 Регистрация: 20.10.2015 Сообщений: 101
	15.04.2016, 17:56 [ТС]
	Вооот, то что нужно) Спасибо) 0