動態添加字段到js中的表

我有JSON數據顯示在HTML表中。我有單獨的輸入字段，如對象中的相同鍵（名字，姓氏，電子郵件，電話號碼）和「添加行」按鈕。動態添加字段到js中的表

我需要在輸入字段中輸入值，然後當我單擊「添加行」按鈕時，輸入字段應附加到表中。

我可以在表格中顯示數據，但我無法將新數據追加到表格中。我也需要驗證這些字段。任何人都可以幫助解決這個問題

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"},   {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"},   {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}]; 

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

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

var row = document.createElement("tr"); 
table.appendChild(row); 
Object.keys(obj[0]).forEach(function(val) { 
    var cell = document.createElement("th"); 
    row.appendChild(cell); 
    cell.innerHTML = "Sl.No"; 
    cell.innerHTML = val; 
    cell.style.border = '1px solid #ccc'; 
}); 

for (var i = 0; i < obj.length; i++) { 
    var row = document.createElement("tr"); 
    table.appendChild(row); 
    for (key in obj[i]) { 
    var cell = document.createElement("td"); 
    row.appendChild(cell); 
    cell.innerHTML = obj[i][key]; 
    cell.style.border = '1px solid #ccc'; 
    } 
} 

var addForm = document.createElement('div'); 
form.appendChild(addForm); 

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

var input = document.createElement('input'); 
input.type = "text"; 
input.id = "firstName"; 
input.placeholder = "Firstname"; 
addForm.appendChild(input); 

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

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

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

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

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

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

var addTable = function() { 
    var fn = document.getElementById("firstName").value; 
    var ln = document.getElementById("lastName").value; 
    var mail = document.getElementById("emailId").value; 
    var num = document.getElementById("phNum").value; 
};

JsFiddle

來源

2016-03-15 Raja O

你可以檢查小提琴（https://jsfiddle.net/mco8wzev/9/）once.Below是代碼

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"}, 
    {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"}, 
    {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}]; 

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

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

var row = document.createElement("tr"); 
table.appendChild(row); 
Object.keys(obj[0]).forEach(function(val) { 
var cell = document.createElement("th"); 
row.appendChild(cell); 
cell.innerHTML = "Sl.No"; 
cell.innerHTML = val; 
cell.style.border = '1px solid #ccc'; 
}); 

for (var i = 0; i < obj.length; i++) { 
var row = document.createElement("tr"); 
table.appendChild(row); 
for (key in obj[i]) { 
var cell = document.createElement("td"); 
row.appendChild(cell); 
cell.innerHTML = obj[i][key]; 
cell.style.border = '1px solid #ccc'; 
} 
} 

var addForm = document.createElement('div'); 
form.appendChild(addForm); 

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

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

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

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

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

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

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

var addTable = function() { 
var row = document.createElement("tr"); 
table.appendChild(row); 
var cell = document.createElement("td"); 
row.appendChild(cell); 
cell.innerHTML = input.value; 
cell.style.border = '1px solid #ccc'; 
var cell = document.createElement("td"); 
row.appendChild(cell); 
cell.innerHTML = input1.value; 
cell.style.border = '1px solid #ccc'; 
var cell = document.createElement("td"); 
row.appendChild(cell); 
cell.innerHTML = input2.value; 
cell.style.border = '1px solid #ccc'; 
var cell = document.createElement("td"); 
row.appendChild(cell); 
cell.innerHTML = input3.value; 
cell.style.border = '1px solid #ccc'; 
}; 
var btnClick = document.createElement('input'); 
btnClick.type = "button"; 
btnClick.value = "Add Row"; 
btnClick.onclick = addTable; 
form.appendChild(btnClick);

希望它可以幫助你...還addTable功能需要優化..我會更新一次它的完成..雖然你也可以嘗試..

來源

2016-03-15 08:05:06 getty

確定Getty ..謝謝讓我試試:) –

一旦我們追加值就可以重置輸入字段。 –

是的，我們可以重置它。更新復位功能的小提琴。 – getty

你只需要在這裏btnClick.onclick = addTable;

您使用btnClick.onclick = addTable;使用之前定義var addTable = function() { }這裏addTable是undefined，所以在使用它，你必須定義。

來源

2016-03-15 07:53:52

應該工作

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"},   {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"},   {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}]; 
 
    function addRow(obj){ 
 
     var table = document.getElementById('myTable'); 
 
     var row = document.createElement("tr"); 
 
     table.appendChild(row); 
 
     for (key in obj) { 
 
     var cell = document.createElement("td"); 
 
     row.appendChild(cell); 
 
     cell.innerHTML = obj[key]; 
 
     cell.style.border = '1px solid #ccc'; 
 
     } 
 
    } 
 
    var addTable = function() { 
 
     var fn = document.getElementById("firstName").value; 
 
     var ln = document.getElementById("lastName").value; 
 
     var mail = document.getElementById("emailId").value; 
 
     var num = document.getElementById("phNum").value; 
 
     addRow({Firstname:fn,Lastname:ln,Email:mail,Number:num}); 
 
     return false; 
 
    }; 
 
    var form = document.createElement('form'); 
 
    document.body.appendChild(form); 
 
    form.onsubmit = addTable 
 
    
 
    var table = document.createElement("table"); 
 
    table.setAttribute("id", "myTable"); 
 
    form.appendChild(table); 
 
    
 
    var row = document.createElement("tr"); 
 
    table.appendChild(row); 
 
    Object.keys(obj[0]).forEach(function(val) { 
 
     var cell = document.createElement("th"); 
 
     row.appendChild(cell); 
 
     cell.innerHTML = "Sl.No"; 
 
     cell.innerHTML = val; 
 
     cell.style.border = '1px solid #ccc'; 
 
    }); 
 
    
 
    for (var i = 0; i < obj.length; i++) { 
 
     addRow(obj[i]) 
 
    } 
 
    
 
    var addForm = document.createElement('div'); 
 
    form.appendChild(addForm); 
 
    
 
    var checkbox = document.createElement('input'); 
 
    checkbox.type = "checkbox"; 
 
    
 
    var input = document.createElement('input'); 
 
    input.type = "text"; 
 
    input.id = "firstName"; 
 
    input.required = true 
 
    input.placeholder = "Firstname"; 
 
    addForm.appendChild(input); 
 
    
 
    var input1 = document.createElement('input'); 
 
    input1.type = "text"; 
 
    input1.required = true 
 
    input1.id = "lastName"; 
 
    input1.placeholder = "Lastname"; 
 
    addForm.appendChild(input1); 
 
    
 
    var input2 = document.createElement('input'); 
 
    input2.type = "email"; 
 
    input2.id = "emailId"; 
 
    input2.required = true 
 
    input2.placeholder = "Email"; 
 
    addForm.appendChild(input2); 
 
    
 
    var input3 = document.createElement('input'); 
 
    input3.type = "number"; 
 
    input3.required = true 
 
    input3.id = "phNum"; 
 
    input3.placeholder = "Number"; 
 
    addForm.appendChild(input3); 
 
    
 
    var btnSave = document.createElement('button'); 
 
    btnSave.innerHTML = "Save"; 
 
    
 
    var btnEdit = document.createElement('button'); 
 
    btnEdit.innerHTML = "Edit"; 
 
    
 
    var btnClick = document.createElement('input'); 
 
    btnClick.type = "submit"; 
 
    btnClick.value = "Add Row"; 
 
    btnClick.onclick = addTable; 
 
    form.appendChild(btnClick);

* { 
 
    font-famil: 'verdana'; 
 
} 
 
table { 
 
    margin-bottom: 15px; 
 
} 
 
input { 
 
    margin: 5px 
 
} 
 
th, td { 
 
    padding: 5px; 
 
    font: 13px 'verdana'; 
 
} 
 
th { 
 
    font-weight: bold 
 
}

來源

2016-03-15 07:59:47 Zamboney

謝謝讓我檢查（Y） –

檢查行是不是追加.. –

現在檢查它已被修復 – Zamboney

動態添加字段到js中的表

回答

相關問題