Генерация таблицы с объединенными ячейками и нумерация ячеек

Katerina23 · April 10, 2018

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

Вот пример скриншота, красным выделено правильный подсчет ячеек (нужно смотреть на последнюю цифру после черточки). Если смотреть на rowspan, то он изначально все правильно считает. Как мне сделать, чтобы цифры одинаково отображались то есть если 7 ячейка, то она 7 для всех независимо от colspan?

P.S. Надеюсь я понятно разъяснила суть проблемы. Ниже находится код.

img.jpg.d0bd9fbef53d9e2b3aea3f5bbfbe652f.jpg

А вот сам код:

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

Switch74 · April 11, 2018

добавляя rowSpan равный arr[ii][2] вам нужно ii увеличивать на arr[ii][2]
с colSpan аналогично

сори, не особо вник в скрипт, в формировании arr вы это уже должны учесть

Sign In

Генерация таблицы с объединенными ячейками и нумерация ячеек

Question

Katerina23

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information