Создание и объединение ячеек в таблице

@Katerina1993 · Регистрация: 17.01.2017

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

Создала таблицу через цикл и пытаюсь объединить ячейки, при объединении часть ячеек выходит за пределы таблицы. Подскажите, пожалуйста как это можно исправить?
Код.

PHP/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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина таблицы</title>
  <script>
 function tableCreate(){
    var body = document.body,
    tbl  = document.createElement('table');
    
    tbl.style.border = '1px solid black';
    tbl.cellSpacing = 0;
    for(var i = 0; i < 15; i++){
        var tr = tbl.insertRow(); 
        for(var j = 0; j < 20; j++){
            if(i == 2 && j == 5){
                
            } else {
                var td = tr.insertCell();
                td.style.border = '1px solid black ';
                td.width = "50px";
                td.height = "50px";
                if(i == 5 && j == 7)
                {
                    td.setAttribute('rowSpan', '3');
                    td.setAttribute('colSpan', '3');
                }
                
            }
        }
    }
    body.appendChild(tbl);
}
 
</script>
 </head>
 <body onload="tableCreate()">
</body>
</html>

Скриншот

@diadiavova · 06.04.2018, 15:58

Katerina1993, можно ввести дополнительную функцию, которая будет вычислять количество ячеек для строк, точнее модификацию количества.

PHP/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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Ширина таблицы</title>
    <script>
        function tableCreate()
        {
            var body = document.body,
                tbl = document.createElement('table');
 
            tbl.style.border = '1px solid black';
            tbl.cellSpacing = 0;
            let jMode = (i, r, w, h) =>
            {
                if (i == r) return w - 1;
                if (i > r && i < (r + h)) return w;
                return 0;
            };
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20 - jMode(i, 5, 3, 3); j++)
                {
                    if (i == 2 && j == 5)
                    {
 
                    } else
                    {
                        var td = tr.insertCell();
                        td.style.border = '1px solid black ';
                        td.width = "50px";
                        td.height = "50px";
                        if (i == 5 && j == 7)
                        {
                            td.setAttribute('rowSpan', '3');
                            td.setAttribute('colSpan', '3');
                        }
 
                    }
                }
            }
            body.appendChild(tbl);
        }
 
    </script>
</head>
 
<body onload="tableCreate()">
</body>
 
</html>

Здесь фукнция jMode принимает аргументы:
i - индекс строки
r - строка, с которой начинается "большая дырка"
w - количество столбцов в дырке(colspan)
h - количество строк в дырке (rowspan)

Из этого рассчитывается насколько надо уменьшить количество ячеек в текущей строке.

@Katerina1993 · 06.04.2018, 18:16 **[ТС]**

Если я поменяю параметры и поставлю объединение ячеек со 2 строки и 10 колонки.

JavaScript
1
2
3
4
5
if (i == 1 && j == 10)
{
          td.setAttribute('rowSpan', '3');
          td.setAttribute('colSpan', '3');
}

То все равно будет сильное смешение.

@diadiavova · 06.04.2018, 18:48

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

Если я поменяю параметры и поставлю объединение ячеек со 2 строки и 10 колонки.

Ну я же не зря подробно описывал каждый параметр функции. Меняешь положение большой ячейки меняй аргументы.

JavaScript
24
                for (var j = 0; j < 20 - jMode(i, 1, 3, 3); j++)

Добавлено через 5 минут
А еще лучше, положение дырки вынеси в параметры функции. Вот так.

PHP/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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Ширина таблицы</title>
    <script>
        function tableCreate(hRow, hColumn)
        {
            var body = document.body,
                tbl = document.createElement('table');
 
            tbl.style.border = '1px solid black';
            tbl.cellSpacing = 0;
            let jMode = (i, r, w, h) =>
            {
                if (i == r) return w - 1;
                if (i > r && i < (r + h)) return w;
                return 0;
            };
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20 - jMode(i, hRow, 3, 3); j++)
                {
                    if (i == 2 && j == 5)
                    {
 
                    } else
                    {
                        var td = tr.insertCell();
                        td.style.border = '1px solid black ';
                        td.width = "50px";
                        td.height = "50px";
                        if (i == hRow && j == hColumn)
                        {
                            td.setAttribute('rowSpan', '3');
                            td.setAttribute('colSpan', '3');
                        }
 
                    }
                }
            }
            body.appendChild(tbl);
        }
 
    </script>
</head>
 
<body onload="tableCreate(7, 3)">
</body>
 
</html>

@Katerina1993 · 08.04.2018, 15:08 **[ТС]**

А если например мне нужно сделать в нескольких местах объединение. Координаты и количество ячеек (которые нужно объединить) указаны в массиве. Как в этом случае быть? У меня например происходит дублирование ячеек.

PHP/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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ширина таблицы</title>
    <script>
        function tableCreate()
        {
            var body = document.body,
                tbl = document.createElement('table');
                var arr = [[1,1,4,4],[5,5,3,3]]
 
            tbl.style.border = '1px solid black';
            tbl.cellSpacing = 0;
            let jMode = (i, r, w, h) =>
            {
                if (i == r) return w - 1;
                if (i > r && i < (r + h)) return w;
                return 0;
            };
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20; j++)               
                {
                          
                          
                         for(var ii = 0; ii < arr.length; ii++)
                         {
                          if(j < 20-jMode(i, arr[ii][0], arr[ii][3], arr[ii][2]))
                          {
                              var td = tr.insertCell();
                              td.style.border = '1px solid black ';
                              td.width = "50px";
                              td.height = "50px";
                              if (i == arr[ii][0] && j == arr[ii][1])
                              {
                                  td.setAttribute('rowSpan', arr[ii][2]);
                                  td.setAttribute('colSpan', arr[ii][3]);
                                  td.innerHTML = "<img src=\"img.jpg\">";
                              }
                           }
                         }
                          
                          
                       
                        
                }
                
            }
            body.appendChild(tbl);
        }
 
    </script>
</head>
<body onload="tableCreate()">
</body>

@diadiavova · 10.04.2018, 22:33

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

А если например мне нужно сделать в нескольких местах объединение. Координаты и количество ячеек (которые нужно объединить) указаны в массиве. Как в этом случае быть? У меня например происходит дублирование ячеек.

Я поначалу думал, что там немного надо подкорректировать код и все заработает. Оно вроде и заработало, пока строки, на которых расположены дырки не пересекались, а как пересеклись - все поползло. Отложил задачу, сейчас сделал, вроде работает, так что если еще актуально...

Суть проблемы состояла в том, что если слева от новой дырки есть другая дырка, то положение этой самой новой дырки сдвигается на ширину той что слева(очень сложно внятно объяснить). То есть если дырка должна быть в пятой колонке, а слева есть другая дырка шириной в три колонки, то новую надо ставить не на пятой ячейке строки, а только на второй или третьей, в зависимости о того, находится ли дырка слева на этой же строке или выше.

Решил двумя способами. Первый состоит в том, что таблица сначала заполняется ячейками полностью. Потом устанавливаются дырки слева-направо, причем ячейка для новой дырки вычисляется по физическому положению. То есть, если надо поставить в пятый столбец, а ширина столбца - 50пх, плюс два пикселя на боковых границах, соответственно умножаем 52 на 5 и ищем ячейку в этом положении. После чего все ячейки вылезшие за расчетную ширину таблицы удаляются. Правда в этом случае были проблемы, когда страница грузилась в масштабированную вкладку. Там удалялись лишние столбцы почему-то. Второй способ построен на точном расчете (функция createTable) и должен работать правильно, но тоже не могу гарантировать, что будет так работать во всех случаях. Так что надо тестировать.

PHP/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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Ширина таблицы</title>
    <script>
 
        function tableCreate(data)
        {
            data.sort((p1, p2) => p1[0] - p2[0]);
            var body = document.body,
                tbl = document.createElement('table');
            tbl.style.border = '1px solid black';
            tbl.cellSpacing = 0;
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20; j++)
                {
                    var td = tr.insertCell();
                    td.style.border = '1px solid black ';
                    td.width = "50px";
                    td.height = "50px";
                    td.title = `${i}:${j}`;
                }
            }
            body.appendChild(tbl);
            for (const pp of data)
            {
                let cell = Array.from(tbl.rows[pp[0]].cells).find(c => c.offsetLeft >= 52 * pp[1]);
                cell.setAttribute("colspan", pp[2]);
                cell.setAttribute("rowspan", pp[3]);
                let ccc = Array.from(tbl.querySelectorAll("td")).filter(c => c.offsetLeft > 20 * 52).
                    forEach(c => c.parentElement.removeChild(c));
            }
 
        }
 
 
        function createTable(data)
        {
            data = calcCells(data.map(i => i.map(j => j)));
            let tbl = document.createElement('table');
            tbl.border = 1;
            tbl.cellSpacing = 0;
            let jMode = (i, r, w, h) =>
            {
                if (i == r) return w - 1;
                if (i > r && i < (r + h)) return w;
                return 0;
            };
            let jModes = i =>
            {
                let result = 0;
                for (const p of data)
                {
                    result += jMode(i, p[0], p[2], p[3]);
                }
                return result;
            };
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20 - jModes(i); j++)
                {
                    var td = tr.insertCell();
                    td.width = "50px";
                    td.height = "50px";
                    td.title = `${i}:${j}`;
                }
            }
            for (const pp of data)
            {
                let cell = tbl.rows[pp[0]].cells[pp[1]];
                cell.setAttribute("colspan", pp[2]);
                cell.setAttribute("rowspan", pp[3]);
            }
            return tbl;
        }
 
 
        function calcCells(data)
        {
            data.sort((a1, a2) => a1[0] - a2[0]);
            for (let i = 0; i < data.length; i++)
            {
                for (let j = 0; j < i; j++)
                {
                    if (data[i][1] > data[j][1])
                    {
                        if (data[i][0] == data[j][0])
                        {
                            data[i][1] -= (data[j][2] - 1);
                        }
                        if (data[i][0] > data[j][0] && data[i][0] < (data[j][0] + data[j][3]))
                        {
                            data[i][1] -= data[j][2];
                        }
                    }
                }
            }
            return data;
        }
 
        window.onload = function (evt)
        {
            tableCreate([[1, 1, 4, 4], [5, 5, 3, 3], [7, 8, 5, 6], [6, 0, 3, 3]]);
            let data = [[1, 1, 4, 4], [5, 5, 3, 3], [7, 8, 5, 6], [6, 0, 3, 3]];
            document.getElementById("container1").appendChild(createTable(data));
            document.getElementById("container2").appendChild(createTable(data));
        };
 
    </script>
</head>
 
<body>
    <div id="container1"></div>
    <div id="container2"></div>
 
</body>
 
</html>

В примере первые две таблицы сформированы методом createTable(с помощью расчета клеток), последняя - tableCreate (с помощью расчета физических позиций).

@Katerina1993 · 12.04.2018, 22:30 **[ТС]**

Спасибо большое, скрипт отлично работает только вот у меня возникла проблема, идентифика́тор проставляет не так как мне нужно, все ячейки объединенные colspan считаются как одна. Например (предыдущая ячейка - 1_1), (colspan="3" - 1_2), (следующая ячейка - 1_3), а должно быть вот так (предыдущая ячейка - 1_1), (colspan="3" - 1_2, 1_3, 1_4), (следующая ячейка - 1_5), то есть если объединено три ячейки то они должны и считаться за три ячейки (а не за одну). Иначе таблица в конце не сходится по id. Подскажите пожалуйста как это сделать? На всякий случай вот скриншот.

P.S. Раньше работала с Flash там это делалось куда проще чем на JS.
Интересно, то что rowspan считает каждую ячейку, не то что colspan.

@diadiavova · 13.04.2018, 13:06

Katerina1993, я там выше писал о двух методах расчетов, которые можно использовать. В данном случае это тоже актуально. Проще использовать первый способ, где индекс колонки для конкретной ячейки определяется по ее положению в строке, то есть по количеству пикселей между левыми границами строки и ячейки. Метод достаточно прост: Вычисляешь ширину ячейки, по всей видимости в твоем случае это будет 52 пикселя, поскольку 50 ты установила сама, плюс еще два на границы слева и справа. Но лучше проверить.
Дальше у элементов, в том числе у ячеек, есть свойство offsetLeft, оно покажет отступ от левой границы родительского контейнера, для ячейки это будет строка.
Ну и разделив этот отступ на ширину ячейки можно узнать, сколько столбцов находится слева от нее, это и будет индекс текущего столбца, если считать индексы с нуля (как они обычно и считаются).

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

Добавлено через 12 часов 35 минут
Katerina1993, в принципе, если надо чтобы ячейки стояли на своих местах, то всю задачу можно было решить гораздо проще - делая невидимыми ячейки, места которых заняты дырками, вместо того, чтобы создавать меньше ячеек в таких строках.

PHP/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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Ширина таблицы</title>
    <style>
        .collapse {
            display: none;
        }
    </style>
    <script>
 
        function createNewTable(data)
        {
            let tbl = document.createElement('table');
            tbl.border = 1;
            tbl.cellSpacing = 0;
            for (var i = 0; i < 15; i++)
            {
                var tr = tbl.insertRow();
                for (var j = 0; j < 20; j++)
                {
                    var td = tr.insertCell();
                    td.width = "50px";
                    td.height = "50px";
                    td.title = `${i}:${j}`;
                }
            }
            for (const pp of data)
            {
                let cell = tbl.rows[pp[0]].cells[pp[1]];
                cell.setAttribute("colspan", pp[2]);
                cell.setAttribute("rowspan", pp[3]);
                for (let row = 0; row < pp[3]; row++)
                {
                    for (let col = 0; col < pp[2]; col++)
                    {
                        tbl.rows[row + pp[0]].cells[col + pp[1]].classList.add("collapse");
                    }
                }
                cell.classList.remove("collapse");
            }
            return tbl;
        }
 
        window.onload = function (evt)
        {
            let data = [[1, 1, 4, 4], [5, 5, 3, 3], [7, 8, 5, 6], [6, 0, 3, 3]];
            document.getElementById("container1").appendChild(createNewTable(data));
        };
 
    </script>
</head>
 
<body>
    <div id="container1"></div>
</body>
 
</html>

@Katerina1993 · 15.04.2018, 21:49 **[ТС]**

Спасибо за помощь, скрипт я уже протестировала и он отлично работает

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Katerina1993 403 / 19 / 5 Регистрация: 17.01.2017 Сообщений: 572
	12.04.2018, 22:30 [ТС]
	Спасибо большое, скрипт отлично работает только вот у меня возникла проблема, идентифика́тор проставляет не так как мне нужно, все ячейки объединенные colspan считаются как одна. Например (предыдущая ячейка - 1_1), (colspan="3" - 1_2), (следующая ячейка - 1_3), а должно быть вот так (предыдущая ячейка - 1_1), (colspan="3" - 1_2, 1_3, 1_4), (следующая ячейка - 1_5), то есть если объединено три ячейки то они должны и считаться за три ячейки (а не за одну). Иначе таблица в конце не сходится по id. Подскажите пожалуйста как это сделать? На всякий случай вот скриншот. P.S. Раньше работала с Flash там это делалось куда проще чем на JS. Интересно, то что rowspan считает каждую ячейку, не то что colspan. 0

@Katerina1993 403 / 19 / 5 Регистрация: 17.01.2017 Сообщений: 572
	15.04.2018, 21:49 [ТС]
	Спасибо за помощь, скрипт я уже протестировала и он отлично работает 0

Создание и объединение ячеек в таблице

Решение