Динамическая таблица на Javascript

var DynamicTable = (function(GLOB) { 
  var RID = 0; 
  return function(tBody) { 
    /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ 
    if (!(this instanceof arguments.callee)) { 
      return new arguments.callee.apply(arguments); 
    } 
    //Делегируем прослушку событий элементу tbody 
    tBody.onclick = function(e) { 
      var evt = e || GLOB.event, 
        trg = evt.target || evt.srcElement; 
      if (trg.className && trg.className.indexOf("add") !== -1) { 
        _addRow(trg.parentNode.parentNode, tBody); 
      } else if (trg.className && trg.className.indexOf("del") !== -1) { 
        tBody.rows.length > 1 && _delRow(trg.parentNode.parentNode, tBody); 
      } 
      // то что я добавил 
      if (trg.className && trg.className.indexOf("edit") !== -1) { 
        var tds = trg.closest('tr').children; 
        for (var i = 0; i < tds.length; i++) { 
          if (tds[i].className.indexOf("buttons") == -1) { 
            var input = tds[i].getElementsByTagName('input')[0]; 
            var lbl = tds[i].getElementsByTagName('label')[0]; 
            input.value = lbl.textContent; 
            input.classList.remove("invisible"); 
            lbl.classList.add("invisible"); 
          } else { 
            var buttons = tds[i].children; 
            for (var j = 0; j < buttons.length; j++) { 
              if (buttons[j].className.indexOf("save") !== -1) { 
                buttons[j].disabled = false; 
                break; 
              } 
            } 
          } 
        } 
      } 
 
      if (trg.className && trg.className.indexOf("save") !== -1) { 
        var tds = trg.closest('tr').children; 
        for (var i = 0; i < tds.length; i++) { 
          if (tds[i].className.indexOf("buttons") == -1) { 
            var input = tds[i].getElementsByTagName('input')[0]; 
            var lbl = tds[i].getElementsByTagName('label')[0]; 
            lbl.textContent = input.value; 
            input.classList.add("invisible"); 
            lbl.classList.remove("invisible"); 
          } else { 
            var buttons = tds[i].children; 
            for (var j = 0; j < buttons.length; j++) { 
              if (buttons[j].className.indexOf("save") !== -1) { 
                buttons[j].disabled = true; 
                break; 
              } 
            } 
          } 
        } 
      } 
    }; 
    // тут конец того что я добавил  
 
    var _rowTpl = tBody.rows[0].cloneNode(true); 
    // Корректируем имена элементов формы 
    var _correctNames = function(row) { 
      var elements = row.getElementsByTagName("*"); 
      for (var i = 0; i < elements.length; i += 1) { 
        if (elements.item(i).name) { 
          if (elements.item(i).type && 
            elements.item(i).type === "radio" && 
            elements.item(i).className && 
            elements.item(i).className.indexOf("glob") !== -1) { 
            elements.item(i).value = RID; 
          } else { 
            elements.item(i).name = RID + "[" + elements.item(i).name + "]"; 
          } 
        } 
      } 
      RID++; 
      return row; 
    }; 
    var _addRow = function(before, tBody) { 
      var newNode = _correctNames(_rowTpl.cloneNode(true)); 
      tBody.insertBefore(newNode, before.nextSibling); 
    }; 
    var _delRow = function(row, tBody) { 
      tBody.removeChild(row); 
    }; 
    _correctNames(tBody.rows[0]); 
  }; 
})(this); 
 
document.addEventListener('DOMContentLoaded', function() { 
  new DynamicTable(document.getElementById("dynamic")); 
});

body { 
  font-family: "Helvetica"; 
  font-size: medium; 
} 
 
table { 
  border-collapse: collapse; 
  text-align: center; 
  margin: auto; 
} 
 
table td { 
  padding: 0px; 
  height: 30px; 
  width: 140px; 
} 
 
table td input, 
table td label { 
  width: 100%; 
  height: 100%; 
  border: none; 
  text-align: center; 
  font-size: 16px; 
} 
 
table tbody tr:nth-child(2n), 
table tbody tr:nth-child(2n) input { 
  background: #a8d7ff; 
} 
 
table tbody tr:hover { 
  background: #fffcb6; 
} 
 
table tbody tr:hover input { 
  background: #fffcb6; 
} 
 
table tbody input:hover { 
  background: #ffd3b6 !important; 
} 
 
table tbody input:active { 
  background: #c27949 !important; 
} 
 
.tblBtn { 
  width: auto; 
  height: 20px; 
} 
 
.buttons { 
  width: 150px; 
} 
 
.invisible { 
  display: none; 
}

<table border="1" cellspacing="0" cellpadding="5"> 
  <thead> 
    <tr> 
      <th class="buttons" scope="col">Buttons</th> 
      <th scope="col">Поле 2</th> 
      <th scope="col">Поле 3</th> 
      <th scope="col">Поле 4</th> 
      <th scope="col">Поле 5</th> 
    </tr> 
  </thead> 
  <tbody id="dynamic"> 
    <tr> 
      <td class="buttons"> 
        <button type="button" class="tblBtn add">+</button><button type="button" class="tblBtn del">-</button> 
        <button type="button" class="tblBtn edit">Edit</button><button type="button" class="tblBtn save" disabled="disabled">Save</button> 
      </td> 
      <td><input type="text" class="invisible" /><label>1</label></td> 
      <td><input type="text" class="invisible" /><label>12</label></td> 
      <td><input type="text" class="invisible" /><label>123</label></td> 
      <td><input type="text" class="invisible" /><label>1234</label></td> 
    </tr> 
  </tbody> 
</table>