如何将 `appendPre` 放入表中? [英] How do I get `appendPre` into a table?

问题描述

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

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

解决方案

您不能将

嵌入到

 元素中，因此您需要稍微改变你的 HTML 结构.剩下的就是从你的 JS 代码中创建和插入 DOM 节点，比如 tr、td 和 th.
示例实现
function appendRow (table, elements, tag) {var row = document.createElement('tr')element.forEach(function (e) {var cell = document.createElement(tag || 'td')if (typeof e === '字符串') {cell.textContent = e} 别的 {cell.appendChild(e)}row.appendChild(单元格)})table.appendChild(row)}变量文件 = {name: '你好',viewsByMeTime: '2017-03-11T01:40:31.000Z',webViewLink: 'http://drive.google.com/134ksdf014kldsfi0234lkjdsf0314/',quotaBytesUsed: 0}var table = document.getElementById('content')//创建标题行appendRow(table, ['Name', 'Date', 'Link', 'Size'], 'th')//创建数据行appendRow(table, [文档名称，file.viewedByMeTime.split('.')[0],文件.webViewLink，file.quotaBytesUsed + '字节'])
#content td, #content th {边框:1px 实心 #000；填充:0.5em；}#内容 {边框折叠:折叠；}

</table>

I am using DriveAPI to list a bunch of files with their names, last modified date, etc.

This is the appendPre function:

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

and this is the code the writes it out:

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

How do I organize this into a table where one column represents the name, another the time, etc. I want it to look a bit like this:

解决方案

You cannot embed a <table> into a <pre> element, so you need to change your HTML structure a little bit. The rest is just creating and inserting DOM nodes like tr, td, and th from your JS code.

Example Implementation

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>

这篇关于如何将 `appendPre` 放入表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.