在 js 中将字段动态添加到表中
Dynamic add fields in to table in js
我有显示在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;
};
小提琴
你能检查一次小提琴(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功能。一旦完成,我会更新..意思是,虽然你也可以尝试..
您只需要在此处使用它之前定义var addTable = function() { }
btnClick.onclick = addTable;
你用了btnClick.onclick = addTable;
,这里addTable
undefined
,所以在使用之前你必须定义。
应该
可以工作
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
}
相关文章:
- 正在添加动态第二类Jquery
- 如何在javascript而不是jquery中添加动态列表
- 为图例添加动态色彩标签
- 如何在谷歌表单中添加动态字段
- 如何添加动态Id's并在运行时提取它们
- 在 JavaScript 中添加动态文本
- 如何添加动态表单元素但保留其值(JS)
- 使用AngularJs在自定义TinyMCE编辑器中添加动态数据
- 如何使用JavaScript添加动态HTML内容(DIV)
- javascript初学者:在javascript中添加动态样式
- 如何使用Javascript在html源中添加动态数据
- 向Uploadify添加动态字段
- 如何在 Vue.js 中添加动态组件/部件
- 锚导航与坚持到顶部菜单..需要向锚点添加动态偏移量
- Javascript:添加动态方法
- 向角度对象添加动态功能
- 添加动态文本框时更新动态高度
- JavaScript 运行时错误:无法在 Windows 8 应用中添加动态内容
- 添加动态点击事件
- 添加动态字段以创建特定的 JSON 格式