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

#javascript

Прошу помощи добавить кнопку редактирования / сохранения в ячейке, рядом с другими
кнопками добавления и удаления строк. Кнопка должна дублироваться вместе с остальными,
в каждой строке.



body {
  font-family: "Helvetica";
  font-size: medium;
}

table {
  border-collapse: collapse;
  text-align: center;
  margin: auto;
}

table td,
table th {
  border: solid 1px #aaa;
  padding: 10px;
}

table tbody tr:nth-child(2n) {
  background: #a8d7ff;
}

table tbody tr:hover {
  background: #fffcb6;
}

  

    

      
Поле 1
      
Поле 2
      
Поле 3
      
Поле 4
      
Поле 5
    
  
  

    

      

      

      

      

      

    
  








    

Ответы

Ответ 1

Никогда такого сам не делал, не судите строго :



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;
}

  

    

      
Buttons
      
Поле 2
      
Поле 3
      
Поле 4
      
Поле 5
    
  
  

    

      

        
        
      
      
1
      
12
      
123
      
1234
    
  





Опишу вкратце что я сделал, в каждый td в таблице я добавил input(для редактирования)
label(для хранения результата).
Соответственно при клике на кнопку edit значение с лейбола пишем в инпут, лейбл скрываем,
инпут показываем, при сохранении наоборот.

Вариант без инпутов и лейблов и с 1ной кнопкой : 



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) {

        trg.closest('tr').classList.toggle('in-edit');

        var isEdit = trg.innerText == 'Edit' ? true : false;
        trg.innerText = isEdit ? 'Save' : 'Edit';

        var tds = trg.closest('tr').children;

        for (var i = 0; i < tds.length; i++) {
          if (tds[i].className.indexOf("buttons") == -1) {
            if (isEdit) {
              var curVal = tds[i].innerText;
              tds[i].innerText = '';
              var inp = document.createElement('input');
              inp.value = curVal;
              tds[i].appendChild(inp);
            } else {
              var newVal = tds[i].childNodes[0].value;
              tds[i].removeChild(tds[i].childNodes[0]);
              tds[i].innerText = newVal;
            }
          }
        }
      }
    };
    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: 150px;
}

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;
}

table tbody tr.in-edit input,
table tbody tr.in-edit td {
  background: #d9d6b5;
}

.tblBtn {
  width: auto;
  height: 20px;
}

.buttons {
  width: 150px;
}

.invisible {
  display: none;
}

  

    

      

      
Поле 2
      
Поле 3
      
Поле 4
      
Поле 5
    
  
  

    

      

        
        
      
      

      

      

      

    
  



Ответ 2

Может Вам просто нужно добавить кнопки сюда: 

  
  
  
      
      
      
      
  
  
  
  
  




Правда функционал от этого не появится.