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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

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

3 回答

?
智慧大石

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

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


這是一個(gè)更簡(jiǎ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"}

];


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>


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

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

問(wèn)題是您在插入新單元格時(shí)創(chuàng)建新行,請(qǐ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>


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

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

您正在為所有鍵創(chuàng)建行,將行移動(dò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>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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