使用 Code.gs 中的 javascript 从数组值动态 html 表

Question

我是 javascript 的新手，但我愿意以某种方式学习这个。

正如您在附加图片中看到的，我设法将一些从谷歌工作表中提取的数据放入一个数组中。 我正在努力将此数组数据转换为 html 页面，有人可以指导我如何完成 javascript。 该表应该是动态的，因为每次搜索完成后，返回到数组的行数都会改变。 数据位于 code.gs 文件中的一个变量中，我需要将其链接到 javascript。 非常感谢。

执行日志

Answer 1

如果您想从电子表格中获取数据并包含在动态 html 页面中，请尝试：（根据需要更改 id 和 gid）

<html>
<title>Google Sheets json endpoint V4</title>
<author>Mike Steelson</author>
<style>
table {border-collapse: collapse;}
th,td{border: 1px solid black;}
</style>
<body>
<div id="json">json here</div>
<script>
var id = '_______your id_________';
var gid = '_____your gid_________';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    table += '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table += '<td>' + valeur + '</td>'
      }
    )
    table += '</tr>'
    }
  )
  table += '</table>'
  return table
}           
</script>
</body></html>

使用 Code.gs 中的 javascript 从数组值动态 html 表

问题描述

1 个解决方案

解决方案1
1 2021-11-13 12:14:05

使用 Code.gs 中的 javascript 从数组值动态 html 表

问题描述

1 个解决方案

解决方案1 1 2021-11-13 12:14:05

解决方案1
1 2021-11-13 12:14:05