亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 HTML 表中綁定 json 數據

在 HTML 表中綁定 json 數據

慕斯王 2023-10-20 15:17:54
我正在嘗試導入Excel數據并最終將其綁定到HTML表。目前,它可以工作,但我對數據綁定做了輕微的更改,不幸的是無法按預期綁定數據。jSon這是我迄今為止嘗試過的包含示例數據的代碼片段:var data = [{    ID: "1002",    EMAIL: "[email protected]"  },  {    ID: "1004",    EMAIL: "[email protected]"  },  {    ID: "1006",    EMAIL: "[email protected]"  },  {    ID: "1008",    EMAIL: "[email protected]"  }];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       [email protected]@abc.com預期輸出:ID     EMAIL1002   [email protected]   [email protected]
查看完整描述

3 回答

?
智慧大石

TA貢獻1946條經驗 獲得超3個贊

正如其他人已經說過的,您需要移動行創建


這是一個更簡單的版本


var data = [

{ ID: "1002", EMAIL: "[email protected]" },

{ ID: "1004", EMAIL: "[email protected]"},

{ ID: "1006", EMAIL: "[email protected]"},

{ ID: "1008", EMAIL: "[email protected]"}

];


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>


查看完整回答
反對 回復 2023-10-20
?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

問題是您在插入新單元格時創建新行,請嘗試我們創建一行的地方


var data = [{

    ID: "1002",

    EMAIL: "[email protected]"

  },

  {

    ID: "1004",

    EMAIL: "[email protected]"

  },

  {

    ID: "1006",

    EMAIL: "[email protected]"

  },

  {

    ID: "1008",

    EMAIL: "[email protected]"

  }

];


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>


查看完整回答
反對 回復 2023-10-20
?
不負相思意

TA貢獻1777條經驗 獲得超10個贊

您正在為所有鍵創建行,將行移動到外循環中


var data = [{

    ID: "1002",

    EMAIL: "[email protected]"

  },

  {

    ID: "1004",

    EMAIL: "[email protected]"

  },

  {

    ID: "1006",

    EMAIL: "[email protected]"

  },

  {

    ID: "1008",

    EMAIL: "[email protected]"

  }

];


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>


查看完整回答
反對 回復 2023-10-20
  • 3 回答
  • 0 關注
  • 254 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號