首頁猿問循環遍歷 JSON 數據和...

循環遍歷 JSON 數據和 appendChild <TR> 是否將數據放在一行中？

JavaScript

狐的傳說 2021-06-01 17:55:05

背景：我以為我最終會得到一個動態創建的表，該表具有與<TR>JSON 數據中的條目相同數量的標簽。結果：循環只創建一個表 TR 并將所有數據放在一行中。下面是循環和表創建的片段。var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); var row = document.createElement("tr"); var tdname = document.createElement('td'); var tddate = document.createElement('td'); var tdassigned = document.createElement('td'); for (var i in data) { console.log("Hello world!" + i); tdname.appendChild(document.createTextNode(data[i].name)); tddate.appendChild(document.createTextNode(data[i].date)); tdassigned.appendChild(document.createTextNode(data[i].assigned)); row.appendChild(tdname); row.appendChild(tddate); row.appendChild(tdassigned); } tblBody.appendChild(row); tbl.appendChild(tblBody); document.getElementById("tasklist").appendChild(tbl);問題：我需要為每個循環創建一個唯一的行變量嗎？

查看完整描述

3 回答

當年話下

TA貢獻1890條經驗獲得超9個贊

如果data是對象數組，則從數組方法開始，例如.map()or .forEach()（演示使用，.foreach()因為制作表格實際上并不需要新數組）。
這將遍歷.insertRow()用于每個對象的數組。現在使用Object.values()or將每個對象轉換為其值的元素Object.keys()（演示使用Object.values()它節省了一個步驟）。
現在通過值的陣列與迭代.forEach()或.map()和.insertCell()隨后.textContent的值到細胞中。

let data = [{

date: '1/1/19',

assigned: 'A'

{

date: '2/1/819',

assigned: 'B'

{

date: '3/11/19',

assigned: 'C'

{

date: '4/20/19',

assigned: 'D'

}

];

const frag = document.createDocumentFragment();

const tbl = document.createElement("table");

const tblB = document.createElement("tbody");

tbl.appendChild(tblB);

frag.appendChild(tbl);

data.forEach((obj, idx) => {

let row = tblB.insertRow();

Object.values(obj).forEach(val => {

let cell = row.insertCell();

cell.textContent = val;

});

document.body.appendChild(frag);

反對回復 2021-06-03

一只甜甜圈

TA貢獻1836條經驗獲得超5個贊

我剛剛看到你的評論，你更喜歡 vanilla js。如果有興趣，這里是 jquery 方式。

var data = [

{ Column1: "col1row1", Column2: "col2row1" },

{ Column1: "col1row2", Column2: "col2row2" }

];

$("#tasklist")

.append($('<table>')

.append($('<tbody>')));

var tbody = $("#tasklist > table > tbody");

$.each(data, function (idx, item) {

$(tbody).append($('<tr>')

.append($('<td>')

.text(item.Column1)

)

.append($('<td>')

.text(item.Column2)

)

);

});

反對回復 2021-06-03

3 回答
0 關注
208 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

循環遍歷 JSON 數據和 appendChild <TR> 是否將數據放在一行中？

循環遍歷 JSON 數據和 appendChild <TR> 是否將數據放在一行中？

3 回答

添加回答

循環遍歷 JSON 數據和 appendChild <TR> 是否將數據放在一行中？

循環遍歷 JSON 數據和 appendChild <TR> 是否將數據放在一行中？