Создание строки в таблице

var DynamicTables = {}
 
DynamicTables.Factory = function (columnsCount) {
 
  if (!Element.prototype.remove) {
    Element.prototype.remove = function remove() {
      if (this.parentNode) {
        this.parentNode.removeChild(this);
      }
    };
  }
 
  var createInputCell = function (row, col, value) {
    var newCell = document.createElement('td');
    var newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = 'cell_' + row + '_' + col;
    newInput.value = value || '';
    newInput.placeholder = 'Введите значение';
    newCell.appendChild(newInput);
    return newCell;
  }
 
  var createRow = function (row, values) {
    var newRow = document.createElement('tr');
    newRow.id = 'tr-' + row;
    for (var column = 0; column < columnsCount; column++) {
      var cellValue = values && values[column] ;
      var newCell = createInputCell(row, column, cellValue);
      newRow.appendChild(newCell);
    }
    return newRow;
  }
 
  this.appendRowTo = function (table, row) {
    row = row || undefined;
    var table = document.querySelector(table).tBodies[0];
    var newRow = createRow(table.rows.length, row);
    table.appendChild(newRow);
    return newRow;
  }
 
  this.removeRowsFrom = function (table, rowsCount) {
    for(var i = 1; i <= rowsCount; i++) {
      document.querySelector('#tr-' + i).remove();
    }
  }
}
 
DynamicTables.Storage = function () {
  this.load = function () {
    return JSON.parse(localStorage.getItem('dt_rows'));
  }
 
  this.save = function (data) {
    localStorage.setItem('dt_rows', JSON.stringify(data));
  }
}
 
DynamicTables.App = function (table) {
  var self = this;
  var columnsCount = document.querySelector(table).rows[0].cells.length;
  var factory = new DynamicTables.Factory(columnsCount);
  var storage = new DynamicTables.Storage();
  var data = storage.load() || {rows: []};
 
  var renderRow = function (row) {
    var newRow = factory.appendRowTo(table, row);
    var inputs = newRow.querySelectorAll('input');
    for (var i = 0; i < columnsCount; i++) {
      inputs[i].addEventListener('change', function () { self.saveCell(this); });
    }
  }
 
  var renderRows = function () {
    data['rows'].forEach(function (row) {
      renderRow(row);
    });
  }
 
  this.appendRow = function (row) {
    row = row || [];
    data['rows'].push(row);
    storage.save(data);
    renderRow(row);
  }
 
  this.saveCell = function (input) {
    var cellPos = input.name.split('_');
    var row = cellPos[1];
    var col = cellPos[2];
    data['rows'][row - 1][col] = input.value;
    storage.save(data);
  }
 
  this.clearRows = function () {
    factory.removeRowsFrom(table, data['rows'].length);
    data = {rows: []};
    storage.save(data);
  }
 
  renderRows();
}
 
var init = function () {
  var app = new DynamicTables.App('table');
  var addBtn = document.querySelector('input[type="button"]');
  addBtn.addEventListener('click', function () { app.appendRow(); });
  var resetBtn = document.querySelector('input[type="reset"]');
  resetBtn.addEventListener('click', function () { app.clearRows(); });
}
 
document.addEventListener('DOMContentLoaded', init);