javascript - 如何将“appendPre”添加到表中？

我正在使用DriveAPI列出一堆文件及其名称，上次修改日期等。

这是appendPre函数：

 function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }

这是写出来的代码：

 appendPre(file.name + ' (' + file.viewedByMeTime.split('.')[0] + ')'+ ' (' + file.webViewLink + ')' +' (' + file.quotaBytesUsed + ' bytes)');

如何将其组织成一个表，其中一列代表名称，另一列代表时间，等等。我希望它看起来像这样：

最佳答案

您不能将<table>嵌入到<pre>元素中，因此需要稍微更改HTML结构。剩下的只是从您的JS代码创建和插入DOM节点，例如tr，td和th。

示例实施

function appendRow (table, elements, tag) {
  var row = document.createElement('tr')
  elements.forEach(function (e) {
    var cell = document.createElement(tag || 'td')
    if (typeof e === 'string') {
      cell.textContent = e
    } else {
      cell.appendChild(e)
    }

    row.appendChild(cell)
  })
  table.appendChild(row)
}


var file = {
  name: 'hello',
  viewedByMeTime: '2017-03-11T01:40:31.000Z',
  webViewLink: 'http://drive.google.com/134ksdf014kldsfi0234lkjdsf0314/',
  quotaBytesUsed: 0
}


var table = document.getElementById('content')

// Create header row
appendRow(table, ['Name', 'Date', 'Link', 'Size'], 'th')

// Create data row
appendRow(table, [
  file.name,
  file.viewedByMeTime.split('.')[0],
  file.webViewLink,
  file.quotaBytesUsed + ' bytes'
])

#content td, #content th {
  border: 1px solid #000;
  padding: 0.5em;
}

#content {
  border-collapse: collapse;
}

<table id="content">
</table>

关于javascript - 如何将“appendPre”添加到表中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42730819/