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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .

@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

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

Решение