在Js中動態添加，編輯和刪除表中的行

Question

當我單擊“添加行”按鈕時，它顯示錯誤。 我想在每次單擊添加行按鈕時添加一個新的“ tr”。 每個TD必須包含復選框，名字，姓氏，電子郵件，移動編輯和保存。

1. 如果要單擊“保存”按鈕，我想保存這些值。
2. 和編輯按鈕以編輯字段。
3. 復選框是選擇多個行並刪除整個行。

有人可以幫我做到這一點..在此先感謝。

var form = document.createElement('form');
document.body.appendChild(form);

var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);

var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);

var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";

var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";

var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";

var checkbox = document.createElement('input');
checkbox.type = "checkbox";

var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";

var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";

var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";

var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";

function addTable() {
  var row = document.createElement('tr');
  table.appendChild(row);  
  var cell = document.createElement('td');  
  row.appendChild(cell);
  cell.appendChild(checkbox);
  cell.appendChild(input);
  cell.appendChild(input1);
  cell.appendChild(input2);
  cell.appendChild(input3);
  cell.appendChild(btnSave);
  cell.appendChild(btnEdit);
}

JsFiddle

Answer 1

首先要更改的最重要的事情是用於添加行按鈕的標簽。 通過使用按鈕，您將使每次按下表單時都提交表單，從而撤消行添加和任何其他頁面更改。 如果需要相同的外觀，請使用帶有類型按鈕的<input>標記。 如果您希望頁面在不重新加載的情況下做出響應，則可能需要對保存編輯和刪除按鈕執行相同的操作。

對於其他一切，您幾乎都在那里。 如果我是你，我將停止對所有內容使用setAttribute。 您可以通過直接屬性集（即table.id =“ myTable”;）來設置元素的id和onclick。 當我想一次設置多個屬性時，通常只將setAttribute用於內聯樣式（即table.setAttribute（“ style”，“ border：2px solid; color：red;”）;

這是我的有效代碼版本。

window.onload = function(){
    var addTable = function() {
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";

        var input = document.createElement('input');
        input.type = "text";
        input.placeholder = "Firstname";

        var input1 = document.createElement('input');
        input1.type = "text";
        input1.placeholder = "Lastname";

        var input2 = document.createElement('input');
        input2.type = "email";
        input2.placeholder = "Email";

        var input3 = document.createElement('input');
        input3.type = "number";
        input3.placeholder = "Number";

        var btnSave = document.createElement('button');
        btnSave.innerHTML = "Save";

        var btnDelete = document.createElement('button');
        btnDelete.innerHTML = "Delete";

        var btnEdit = document.createElement('button');
        btnEdit.innerHTML = "Edit";

        var row = document.createElement('tr');
        table.appendChild(row);  
        addCell(row,checkbox);
        addCell(row,input);
        addCell(row,input1);
        addCell(row,input2);
        addCell(row,input3);
        addCell(row,btnSave);
        addCell(row,btnEdit);
        addCell(row,btnDelete);
      };

      var form = document.createElement('form');
      form.method = "post";
      document.body.appendChild(form);

      var table = document.createElement('table');
      table.id = "myTable";
      form.appendChild(table);

      var btnClick = document.createElement('input');
      btnClick.type = "button";
      btnClick.value = "Add Row";
      btnClick.onclick = addTable;
      form.appendChild(btnClick);
  };

  function addCell(row,elm){
      var cell = document.createElement('td');  
      row.appendChild(cell);
      cell.appendChild(elm);
  }