如何将文本从 Google 电子表格中的多个单元格提取到网站，每个单元格都位于不同的 <p> 标签中

How do I pull text from multiple cells in a google spreadsheet to website each in a different <p> tag?

本文关键字：单元格 标签 于不同 提取 文本 Google 电子表格 网站      更新时间：2023-09-26

我正在为客户开发一个网页。其中一个要求是他们能够轻松地编辑图片以及图库页面上的项目描述。我有一个带有项目描述的谷歌表格。我想将这些描述从他们的单元格中提取出来，并将它们放入项目图片下方的<p>标签中。到目前为止，我已经能够使用本网站上另一个问题中的代码将其与单个单元格一起使用：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
      google.load('visualization', '1', {packages: ['corechart', 'line']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        // Add your sheets url and range below
        var spreadsheetUrl = "https://your sheets url here?range=A1";
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }
      function handleQueryResponse(response) {
        var dataTable = response.getDataTable();
        // https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
        // getValue(rowIndex, columnIndex)
        document.getElementById("test").innerHTML = dataTable.getValue(0, 0);
      }
    </script>
  </head>
  <body>
    <p id="test"></p>
  </body>
</html>

我不确定如何扩展此代码以将多个单元格拉取到多个 id，以便在多个<p>标签中使用。我尝试使用以下代码将其扩展到多个函数，但使用该代码，它最终将 B2 中的数据放入应该从 B3 获取数据的<p id="product2">中，而<p id="product1">中没有任何内容应该获取 B2 数据。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
      google.load('visualization', '1', {packages: ['corechart', 'line']});
      google.setOnLoadCallback(drawChart);

   function drawChart() {
        // Add your sheets url and range below
        var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B2";
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }
      function handleQueryResponse(response) {
        var dataTable = response.getDataTable();
        // https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
        // getValue(rowIndex, columnIndex)
        document.getElementById("product1").innerHTML = dataTable.getValue(0, 0);
      }
      function drawChart2() {
        // Add your sheets url and range below
        var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B3";
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }
      function handleQueryResponse(response) {
        var dataTable = response.getDataTable();
        // https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
        // getValue(rowIndex, columnIndex)
        document.getElementById("product2").innerHTML = dataTable.getValue(0, 0);
      }
     </script>
</head>
<body>
<p id="product1" align="center"></p>
<p id="product2" align="center"></p>
</body>

dataTable.getValue(0, 0);获取当前范围内第 0 行第 0 列的值，该值似乎只有 B2。

首先获得所需的范围

   function drawChart() {
        // get B2:B10
        var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B2:B10";
        var query = new google.visualization.Query(spreadsheetUrl);
        query.send(handleQueryResponse);
      }

根据需要更新。查看范围参考

遍历这些值，您可以按如下方式设置产品说明：

  function handleQueryResponse(response) {
    var dataTable = response.getDataTable();
    // the rows and columns are 0 indexed
    // first row
    document.getElementById("product1").innerHTML = dataTable.getValue(0, 0);
    // second row
    document.getElementById("product2").innerHTML = dataTable.getValue(1, 0);
  }

您不需要调用drawChart2，因为您不需要再次获取数据，也不需要第二次handleQueryResponse

相关文章：