Форум

DarkNet32 · #1 (**permalink**) 24.05.2017, 03:07

Здравствуйте, подскажите пожалуйста что нужно дописать чтобы выполнить условие:

Реализовать возможность динамического создания/удаления строк таблицы. Путем добавления кнопок "Добавить"/"Удалить" в четвертую колонку таблицы. Последнюю строку удалить нельзя.

Код:

<!DOCTYPE html>
<html>
	<head>
		<title>Динамическая таблица</title>
        <script type="text/javascript" src="tabl.js"></script>
        <style>
            table, td {
                border: 1px solid #aaa;
                border-collapse: collapse;
                padding: 5px;
                margin: 10px;
            }
            table thead {
                font-weight: bold;
                text-align: center;
            }
        </style>
	</head>
	<body>
	    <div id="table-wrapper"></div>
        <script>
            window.onload = function() {
                var wrapper = document.getElementById('table-wrapper');

                var table = {
                    header : ['Идентификатор', 'Название', 'Описание'],
                    data : [
                        ['1', 'Элемент 1', 'Первый элемент в списке'],
                        ['2', 'Элемент 2', 'Второй элемент в списке'],
                        ['3', 'Элемент 3', 'Третий элемент в списке']
                    ],
                    extra : {
                        filter : false, 	//Добавляет фильтрацию по колонке "Название"
                        dynamic : false, 	//Добавляет кнопку "Удалить"/"Добавить" в последнюю колонку для каждой строки
                        sortable : false	//Добавлять сортировку для колонки "Индетификатор"
                    },
                    properties : {
                        id : 'table-demo',
                        className : 'table table-default'
                    }
                };

                var tableGenerator = new TableGenerator(table, wrapper);
                tableGenerator.render();

                var wrapper = document.getElementById('table-wrapper');
                var tableGenerator = new TableGenerator(table, wrapper);
                tableGenerator.render();
            };
        </script>
	</body>
</html>

/**
 *
 * @param tableJson Table
 * @param wrapper HTMLElement - элемент <div> куда необходимо добавить таблицу
 * @constructor
 */
function TableGenerator(tableJson, wrapper) {
	//private
    var header = tableJson['header'];
	var data = tableJson['data'];
	var extra = tableJson['extra'];
    var properties = tableJson['properties'];

    var that = this; //указатель на текущий объект

    var parentObj = wrapper;

    /**
     * @type HTMLTableElement
     */
    var table = null;

    /**
     * Данная функция будет проверять входные параметры
     */
    (function() {
        if(parentObj == null) {
            console.error('Ошибка элемент для вставки не найден');
            return false;
        }

        _create();

        return true;
    })();

    function _create() {
        table = document.createElement("TABLE");

        //Добавляем свойства для таблицы
        for(var prop in properties) {
            if(properties.hasOwnProperty(prop)) {
                if(!(prop in table)) {
                    //Если свойство не найдено
                    console.warn('Свойство "' + prop + '" не найдено в объекте table');
                    continue;
                }
                table[prop] = properties[prop];
            }
        }

        var cell;

        //Заполняем таблицу основным содержимым
        if(data != undefined) {
            for(var rowIndex in data) {
                if(data.hasOwnProperty(rowIndex)) {
                    var row = table.insertRow(Number(rowIndex));
                    for(var cellIndex in data[rowIndex]) {
                        if(data[rowIndex].hasOwnProperty(cellIndex)) {
                            cell = row.insertCell(Number(cellIndex));
                            cell.innerHTML = data[rowIndex][cellIndex];
							
                        }
                    }
                }
            }
        }

        //Если есть заголовок
        if(header != undefined) {
            //Создаем шапку таблицы
            var head = table.createTHead();
            var headRow = head.insertRow(0);

            for(var headerColumn in header) {
                if(header.hasOwnProperty(headerColumn)) {
                    cell = headRow.insertCell(Number(headerColumn));
                    cell.innerHTML = header[headerColumn];
                }
            }
        }
    }

	this.render = function() {
        if(table == null) {
            console.error('Таблица не сформирована');
            return false;
        }

        wrapper.appendChild(table);
    }
}