在js中动态添加字段到表中答案

【问题标题】：Dynamic add fields in to table in js在js中动态添加字段到表中
【发布时间】：2016-03-15 18:21:54
【问题描述】：

我有显示在 HTML 表中的 JSON 数据。我有单独的输入字段，例如对象中的相同键（名字、姓氏、电子邮件、电话号码）和“添加行”按钮。

我需要在输入字段中输入值，然后当我单击“添加行”按钮时，输入字段应附加到表中。

我可以在表格中显示数据，但无法将新数据附加到表格中。我还需要验证字段。谁能帮忙解决这个问题？

 var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"bob@mayer.com",Number: "123456789"},         {Firstname:"Steven",Lastname:"Spil",Email:"steven@spill.com",Number: "987654321"},         {Firstname:"Paul",Lastname:"Taucker",Email:"paul@tack.com",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

【问题讨论】：

标签： javascript html

【解决方案1】：

你能检查一次小提琴（https://jsfiddle.net/mco8wzev/9/）吗？下面是代码

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"bob@mayer.com",Number: "123456789"},
     {Firstname:"Steven",Lastname:"Spil",Email:"steven@spill.com",Number: "987654321"},
     {Firstname:"Paul",Lastname:"Taucker",Email:"paul@tack.com",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 功能仍需优化...完成后我会更新...意味着您也可以尝试...

【讨论】：

当然 Getty.. 谢谢让我试试 :)
是的，我们可以重置它。更新了带有重置功能的小提琴。
感谢 Getty.. (Y)
当我点击添加行按钮时，空行正在附加..可以防止添加空行..
您需要只检查一个字段还是全部？

【解决方案2】：

您只需要在此处使用btnClick.onclick = addTable;之前定义var addTable = function() { }

你使用了btnClick.onclick = addTable;，而这里的addTable是undefined，所以在使用之前你必须定义它。

【讨论】：

【解决方案3】：

应该可以的

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"bob@mayer.com",Number: "123456789"},         {Firstname:"Steven",Lastname:"Spil",Email:"steven@spill.com",Number: "987654321"},         {Firstname:"Paul",Lastname:"Taucker",Email:"paul@tack.com",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
}

【讨论】：

谢谢让我检查一下（Y）
现在检查它已修复