如何将`appendPre`放入表中？

Question

我正在使用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)');

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

Answer 1

您无法将<table>嵌入到<pre>元素中，因此您需要稍微更改HTML结构。其余的只是创建和插入来自JS代码的tr，td和th等DOM节点。

示例实施

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>