動態添加，編輯和刪除表中的行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); 
    }