javascript - 带有对象的表头和正文

Question

我对javascript和表格有点陌生，我想根据标题对象创建表格标题并将表格主体与项目对象匹配。在这个例子中，我尝试了一个数组。

var data = [
    ['Book', 'Author', 'Year'],
    ['The Great Gatsby', 'Scott Fitzgerald', '1925'],
    ['The Grapes of Wrath', 'John Steinbeck', '1939'],
    ['A Wild Sheep Chase', 'Haruki Murakami', '1982']
  ] 
  
  var table = document.createElement('table');
document.body.appendChild(table);

data.forEach(function(row) {
  var tr = document.createElement('tr'); /
  table.appendChild(tr); 
  row.forEach(function(column) {
    var td = document.createElement('td');
    tr.appendChild(td);
    td.innerText = column; 
  });
});

但不是数据数组，而是我想用数据对象构建同一个表。我可以在我的功能上改变什么？

"data": {
    "headings": [
      {
        "displayName": "Book",
        "columnID": "bookID"
      },
      {
        "displayName": "Author",
        "columnID": "authorID"
      },
      {
        "displayName": "Year",
        "columnID": "yearID"
      },
      {
        "displayName": "",
        "columnID": "urlID"
      }
    ],
    "items": [
      {
        "bookID": "The Great Gatsby",
        "authorID": " F Scott Fitzgerald",
        "yearID": "1925",
        "urlID": "https://google.com"
      },
      {
        "bookID": "The Grapes of Wrath",
        "authorID": "John Steinbeck",
        "yearID": "1939",
        "urlID": "https://google.com"
      },
      {
        "bookID": "A Wild Sheep Chase",
        "authorID": "Haruki Murakami",
        "yearID": "1982",
        "urlID": "https://google.com"
      },
      {
        "bookID": "A Farewell to Arms",
        "authorID": "Ernest Hemingway",
        "yearID": "1929",
        "urlID": "https://google.com"
      }
    ]
  }

标签： javascripthtml

Answer 1

您不能.forEach()在对象上调用函数。

您可以创建两个函数，其中一个负责创建表的头部，第二个函数负责创建表的主体部分。将数组传递headings给负责创建表头items的函数，将数组传递给负责创建表体的函数。

const data = {
  headings: [
    { displayName: 'Book', columnID: 'bookID' },
    { displayName: 'Author', columnID: 'authorID' },
    { displayName: 'Year', columnID: 'yearID' },
    { displayName: 'URL', columnID: 'urlID' }
  ],
  items: [
    { bookID: 'The Great Gatsby', authorID: ' F Scott Fitzgerald', yearID: '1925', urlID: 'https://google.com' },
    { bookID: 'The Grapes of Wrath', authorID: 'John Steinbeck', yearID: '1939', urlID: 'https://google.com', },
    { bookID: 'A Wild Sheep Chase', authorID: 'Haruki Murakami', yearID: '1982', urlID: 'https://google.com', },
    { bookID: 'A Farewell to Arms', authorID: 'Ernest Hemingway', yearID: '1929', urlID: 'https://google.com' }
  ]
};

function displayTable(data) {
  const table = document.createElement('table');

  createTableHead(table, data.headings);
  createTableBody(table, data.items);

  document.body.appendChild(table);
}

function createTableHead(table, headings) {
  const tHead = table.createTHead();
  const headRow = tHead.insertRow();

  headings.forEach(({displayName}) => {
    const th = document.createElement('th');
    th.textContent = displayName;
    headRow.appendChild(th);
  });
}

function createTableBody(table, items) {
  const tbody = document.createElement('tbody');

  items.forEach(({bookID, authorID, yearID, urlID}) => {
    const row = tbody.insertRow();
    row.insertCell().textContent = bookID;
    row.insertCell().textContent = authorID;
    row.insertCell().textContent = yearID;
    row.insertCell().textContent = urlID;
  });

  table.appendChild(tbody);
}

displayTable(data);

table, tr, th, td {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  padding: 5px;
}