Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2017, 03:07
Новичок на форуме
Отправить личное сообщение для DarkNet32 Посмотреть профиль Найти все сообщения от DarkNet32
 
Регистрация: 24.05.2017
Сообщений: 4

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

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

Код:
<!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);
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 24.05.2017, 12:43
Новичок на форуме
Отправить личное сообщение для DarkNet32 Посмотреть профиль Найти все сообщения от DarkNet32
 
Регистрация: 24.05.2017
Сообщений: 4

Нет не каких идей?(
Ответить с цитированием
  #3 (permalink)  
Старый 24.05.2017, 15:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от DarkNet32
Путем добавления кнопок "Добавить"/"Удалить" в четвертую колонку таблицы. Последнюю строку удалить нельзя.
на форуме около 10 решений подобного, попробуйте поискать и посмотреть, как там это решено.
Ответить с цитированием
  #4 (permalink)  
Старый 24.05.2017, 21:36
Новичок на форуме
Отправить личное сообщение для DarkNet32 Посмотреть профиль Найти все сообщения от DarkNet32
 
Регистрация: 24.05.2017
Сообщений: 4

Там с использованием jQuery, а нужно сделать как то без него
Ответить с цитированием
  #5 (permalink)  
Старый 24.05.2017, 22:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DarkNet32,
кнопка "Удалить"/"Добавить" - это как?
Ответить с цитированием
  #6 (permalink)  
Старый 25.05.2017, 03:26
Новичок на форуме
Отправить личное сообщение для DarkNet32 Посмотреть профиль Найти все сообщения от DarkNet32
 
Регистрация: 24.05.2017
Сообщений: 4



Скорее кнопки) одна для удаления строки таблицы, другая для добавления
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление строк в таблицу и скрытие таблицы. III Общие вопросы Javascript 39 20.11.2015 10:05
Поиск по таблице и перестановка строк KemPavel jQuery 2 19.10.2015 12:28
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Номера строк и Chrome LRCenter Opera, Safari и др. 9 09.11.2011 15:53
Добавление строк в текущий документ deerstop Общие вопросы Javascript 11 24.09.2009 23:17