第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

在 HTML 表中綁定 json 數(shù)據(jù)

在 HTML 表中綁定 json 數(shù)據(jù)

慕斯王 2023-10-20 15:17:54
我正在嘗試導(dǎo)入Excel數(shù)據(jù)并最終將其綁定到HTML表。目前,它可以工作,但我對數(shù)據(jù)綁定做了輕微的更改,不幸的是無法按預(yù)期綁定數(shù)據(jù)。jSon這是我迄今為止嘗試過的包含示例數(shù)據(jù)的代碼片段: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>問題是,我擁有的數(shù)據(jù)采用以下格式:ID       EMAIL1002hello@abc.com1004hello2@abc.com預(yù)期輸出:ID     EMAIL1002   hello@abc.com1004   hello2@abc.com
查看完整描述

3 回答

?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗 獲得超3個贊

正如其他人已經(jīng)說過的,您需要移動行創(chuàng)建


這是一個更簡單的版本


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>


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

TA貢獻(xiàn)1825條經(jīng)驗 獲得超6個贊

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


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>


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

TA貢獻(xiàn)1777條經(jīng)驗 獲得超10個贊

您正在為所有鍵創(chuàng)建行,將行移動到外循環(huán)中


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>


查看完整回答
反對 回復(fù) 2023-10-20
  • 3 回答
  • 0 關(guān)注
  • 250 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號