我正在尝试导入Excel数据并最终将其绑定到HTML表。目前，它可以工作，但我对数据绑定做了轻微的更改，不幸的是无法按预期绑定数据。jSon这是我迄今为止尝试过的包含示例数据的代码片段：var data = [{ ID: "1002", EMAIL: "hello@sample.com" }, { ID: "1004", EMAIL: "hello2@sample.com" }, { ID: "1006", EMAIL: "hello3@sample.com" }, { ID: "1008", EMAIL: "hello4@sample.com" }];var table = document.createElement("table");table.border = "1";var cell = "";var row = table.insertRow(-1);//Add the header cellsvar headerCell = document.createElement("TH");headerCell.innerHTML = ("ID");row.appendChild(headerCell);headerCell = document.createElement("TH");headerCell.innerHTML = ("EMAIL");row.appendChild(headerCell);data.forEach(function(obj) { //Get an array of all available keys in current element var keys = Object.keys(obj); //Loop through all obtained keys keys.forEach(function(key) { //The following line will match ID/IDS/id/ids if (key.toUpperCase().indexOf("ID") > -1) { //Add the data cells cell = table.insertRow(-1).insertCell(-1); cell.innerHTML = obj[key]; //console.log("found ids: ", obj[key]); } //The following line will match AMOUNT/AMOUNTS/amount/amounts if (key.toUpperCase().indexOf("EMAIL") > -1) { //Add the data cells cell = table.insertRow(-1).insertCell(-1); cell.innerHTML = obj[key]; //console.log("found emails: ", obj[key]); } });});var dvExcel = document.getElementById("excelTable");dvExcel.innerHTML = "";dvExcel.appendChild(table);<div id="excelTable"></div>问题是，我拥有的数据采用以下格式：ID EMAIL1002hello@abc.com1004hello2@abc.com预期输出：ID EMAIL1002 hello@abc.com1004 hello2@abc.com
3 回答
智慧大石
TA贡献1946条经验 获得超3个赞
正如其他人已经说过的，您需要移动行创建
这是一个更简单的版本
var data = [
{ ID: "1002", EMAIL: "hello@sample.com" },
{ ID: "1004", EMAIL: "hello2@sample.com"},
{ ID: "1006", EMAIL: "hello3@sample.com"},
{ ID: "1008", EMAIL: "hello4@sample.com"}
];
document.getElementById("excelTable").innerHTML = [
'<table border="1"><thead>',
...Object.keys(data[0]).map(key => `<th>${key}</th>`),
'</thead><tbody>',
...data.map(item => `<tr><td>${item.ID}</td><td>${item.EMAIL}</td></tr>`),
'</tbody></table>']
.join("")
<div id="excelTable"></div>
胡子哥哥
TA贡献1825条经验 获得超6个赞
问题是您在插入新单元格时创建新行，请尝试我们创建一行的地方
var data = [{
ID: "1002",
EMAIL: "hello@sample.com"
},
{
ID: "1004",
EMAIL: "hello2@sample.com"
},
{
ID: "1006",
EMAIL: "hello3@sample.com"
},
{
ID: "1008",
EMAIL: "hello4@sample.com"
}
];
var table = document.createElement("table");
table.border = "1";
var cell = "";
var row = table.insertRow(-1);
//Add the header cells
var headerCell = document.createElement("TH");
headerCell.innerHTML = ("ID");
row.appendChild(headerCell);
headerCell = document.createElement("TH");
headerCell.innerHTML = ("EMAIL");
row.appendChild(headerCell);
data.forEach(function(obj) {
//Get an array of all available keys in current element
var keys = Object.keys(obj);
//Loop through all obtained keys
keys.forEach(function(key) {
//The following line will match ID/IDS/id/ids
if (key.toUpperCase().indexOf("ID") > -1) {
//Add the data cells
row = table.insertRow(-1);
cell = row.insertCell(-1);
cell.innerHTML = obj[key];
//console.log("found ids: ", obj[key]);
}
//The following line will match AMOUNT/AMOUNTS/amount/amounts
if (key.toUpperCase().indexOf("EMAIL") > -1) {
//Add the data cells
cell = row.insertCell(-1);
cell.innerHTML = obj[key];
//console.log("found emails: ", obj[key]);
}
});
});
var dvExcel = document.getElementById("excelTable");
dvExcel.innerHTML = "";
dvExcel.appendChild(table);
<div id="excelTable"></div>
不负相思意
TA贡献1777条经验 获得超10个赞
您正在为所有键创建行，将行移动到外循环中
var data = [{
ID: "1002",
EMAIL: "hello@sample.com"
},
{
ID: "1004",
EMAIL: "hello2@sample.com"
},
{
ID: "1006",
EMAIL: "hello3@sample.com"
},
{
ID: "1008",
EMAIL: "hello4@sample.com"
}
];
var table = document.createElement("table");
table.border = "1";
var cell = "";
var row = table.insertRow(-1);
//Add the header cells
var headerCell = document.createElement("TH");
headerCell.innerHTML = ("ID");
row.appendChild(headerCell);
headerCell = document.createElement("TH");
headerCell.innerHTML = ("EMAIL");
row.appendChild(headerCell);
data.forEach(function(obj) {
//Get an array of all available keys in current element
var keys = Object.keys(obj);
var row = table.insertRow(-1);
//Loop through all obtained keys
keys.forEach(function(key) {
//The following line will match ID/IDS/id/ids
if (key.toUpperCase().indexOf("ID") > -1) {
//Add the data cells
cell =row.insertCell(-1);
cell.innerHTML = obj[key];
//console.log("found ids: ", obj[key]);
}
//The following line will match AMOUNT/AMOUNTS/amount/amounts
if (key.toUpperCase().indexOf("EMAIL") > -1) {
//Add the data cells
cell = row.insertCell(-1);
cell.innerHTML = obj[key];
//console.log("found emails: ", obj[key]);
}
});
});
var dvExcel = document.getElementById("excelTable");
dvExcel.innerHTML = "";
dvExcel.appendChild(table);
<div id="excelTable"></div>
添加回答
举报
0/150
提交
取消