首頁猿問循環(huán)通過JSON數(shù)據(jù)和append...

循環(huán)通過JSON數(shù)據(jù)和appendChild <TR>將數(shù)據(jù)放在一行？

JavaScript

BIG陽 2019-05-10 14:15:30

背景：我認(rèn)為我最終得到的是一個動態(tài)創(chuàng)建的表，它與JSON數(shù)據(jù)中的條目數(shù)量相同。結(jié)果：循環(huán)僅創(chuàng)建一個表TR并將所有數(shù)據(jù)放在一行中。下面是循環(huán)和表創(chuàng)建的片段。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);問題：我是否需要為每個循環(huán)創(chuàng)建唯一的行變量？

查看完整描述

3 回答

侃侃無極

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

如果data是對象的數(shù)組，開始像一個陣列的方法.map()或.forEach()（演示使用.foreach()，因為是不是真的需要一個新的陣列做一個表）。
這將使用.insertRow()每個對象迭代數(shù)組?，F(xiàn)在每個對象轉(zhuǎn)換成元件的它的值與Object.values()或Object.keys()（演示使用Object.values()這節(jié)省了步驟）。
現(xiàn)在通過與值的陣列迭代.forEach()或.map()和.insertCell()然后.textContent的值到細(xì)胞中。

let data = [{
    name: 'John Doe',
    date: '1/1/19',
    assigned: 'A'
  },
  {
    name: 'Jane Doe',
    date: '2/1/819',
    assigned: 'B'
  },
  {
    name: 'Darth Vader',
    date: '3/11/19',
    assigned: 'C'
  },
  {
    name: 'Obi Wan',
    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);

反對回復(fù) 2019-05-17

Helenr

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

我剛剛看到你的評論，你更喜歡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)
        )
    );});

反對回復(fù) 2019-05-17