1 Востаннє редагувалося Betterthanyou (11.12.2016 22:42:29)

Тема: Скрипт для динамічного створення таблиці

з попередньої теми
Я створив робочий скрипт для динамічного створення таблиці, він мене майже влаштовує, за виключенням одного, одночасно не можна зробити об'єднання рядків і стовпців.
Можете мені допомогти, я стирався його максимально прокоментувати, тому думаю він буде зрозумілий для вас
(тобто я хочу щоб методи
work_space.merge_col(3, 2, 4);
і
work_space.merge_row(3, 2, 4);
могли працювати разом)

var work_space = 
        {
            _table: null, /*об'єкт таблиці*/
            
            create_table: function(row, col) /*функція створює таблицю*/
            {
                this._table = document.createElement("table"); /*створити таблицю*/
            
                var table_tr; /*тимчасова змінна тега tr*/
                var table_td; /*тимчасова змінна тега td*/
                for(var i = 0; i < row; i++) /*цикл рядків*/
                {
                    table_tr = document.createElement("tr"); /*створити тег tr*/
                    for(var j = 0; j < col; j++) /*цикл стовпців*/
                    {
                        table_td = document.createElement("td"); /*створити тег td*/
                        table_tr.appendChild(table_td); /*приєднати тег td до tr*/
                    }
                    this._table.appendChild(table_tr); /*приєднати тег tr до таблиці*/
                }
                
                return this._table; /*повернути таблицю*/
            },
            
            merge_row: function(num_row, from, to) /*об'єднати рядки*/
            {
                /*
                num_row - номер рядка
                from - з якого рядка починати об'єднання
                to - яким рядком закінчити об'єднання
                наприклад для таблиці 5х5, можна зробити об'єднання в третьому 
                рядку, з другого по четвертий стовпець
                виклик методу матиме вигляд work_space.merge_row(3, 2, 4);
                */
                if(num_row <= 0 || from <= 0 || to < from) /*перевірка на коректність параметрів*/
                    return -1; /*помилка*/
                
                from--, to--; /*зменшуємо значення тому що масив починається з нуля*/
                
                var row_list = this._table.children[num_row - 1]; /*отримуємо об'єкт рядків (тег tr)*/

                for( var i = from; i < to; i++) /*цикл по дітях вузла tr*/
                    row_list.removeChild(row_list.children[from]); /*видаляємо дітей*/
                    
                row_list.children[from].setAttribute('colspan', to - from + 1); /*присвоюємо атрибут colspan з кількістю об'єднаних клітинок*/
            },
            
            merge_col: function(num_col, from, to) /*об'єднати стовпців*/
            {
                /*
                num_row - номер стовпця
                from - з якого рядка починати об'єднання
                to - яким рядком закінчити об'єднання
                наприклад для таблиці 5х5, можна зробити об'єднання в третьому 
                стовпцю, з другого по четвертий рядок
                виклик методу матиме вигляд work_space.merge_col(3, 2, 4);
                */
                if(num_col <= 0 || from <= 0 || to < from) /*перевірка на коректність параметрів*/
                    return -1; /*помилка*/
                
                var row_list = this._table.children[from - 1]; /*отримуємо об'єкт рядків (тег tr)*/
                
                row_list.children[num_col - 1].setAttribute('rowspan', to - from + 1); /*присвоюємо атрибут rowspan з кількістю об'єднаних клітинок*/
                
                for( var i = from; i < to; i++) /*цикл по дітях вузла tr*/
                    this._table.children[i].removeChild(this._table.children[i].children[0]); /*видаляємо дітей*/
            }
        }
        
        window.onload = function()
        {
            var _table = work_space.create_table(5, 5);
            
            work_space.merge_col(3, 2, 4);
            //work_space.merge_row(3, 2, 4);
            
            _table.setAttribute('border', 1);
            
            document.body.appendChild(_table); 
        };
Подякували: 221VOLT1

2

Re: Скрипт для динамічного створення таблиці

Я щойно знайшов інтерфейс HTMLTableElement, він трохи облекшить створення таблиці, але схоже там теж не має можливості об'єднати рядки чи стовпці.

3 Востаннє редагувалося koala (16.12.2016 09:45:21)

Re: Скрипт для динамічного створення таблиці

Бо "об'єднання" (насправді - поширення) - властивість елементу, а не таблиці.
Спробуйте написати те, що ви хочете зробити, на HTML, перед тим, як програмувати.

4

Re: Скрипт для динамічного створення таблиці

Я написав

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3" rowspan="3"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

але якось це складно.

Аби не видаляти клітинки, можливо це було б легше.