Google Script实现：从表格两列提取数据动态生成指定HTML结构

首先看你当前代码的几个核心问题：

• 你定义了target变量指向目标表格，但实际用的却是this_file（当前活动表格），这会导致获取错误的数据
• 用分隔符拼接数据的方式让前端解析很麻烦，应该直接返回结构化的对象数组
• 循环里反复调用getRange效率极低，应该一次性批量获取所有数据

下面是修改后的完整解决方案：

1. 更新Utils.gs文件 #

function getFAQData() {
  // 替换为你的目标表格ID
  const spreadsheetId = '1F1bH0dzR5-UglxWtByS3ojePVEG2aW7qISOgNQ43fz8';
  const sheet = SpreadsheetApp.openById(spreadsheetId).getSheets()[0];
  
  // 批量获取A、B列的所有非空数据（跳过表头，假设表头在第1行）
  const dataRange = sheet.getDataRange();
  const values = dataRange.getValues().filter(row => row[0] && row[1]); // 过滤掉空行
  
  // 转换为结构化数组，每个元素包含question和answer
  return values.map(row => ({
    question: row[0],
    answer: row[1]
  }));
}

2. 更新Index.html文件 #

这个文件会用jQuery调用服务器端函数获取数据，然后动态生成你需要的HTML结构：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 可选：添加折叠面板的CSS样式，让交互更友好 -->
    <style>
      .accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
      }
      .active, .accordion:hover {
        background-color: #ccc;
      }
      .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="faq-container"></div>

    <script>
      $(document).ready(function() {
        // 调用Google Script服务器端函数获取FAQ数据
        google.script.run.withSuccessHandler(renderFAQ).getFAQData();
      });

      // 渲染FAQ结构的函数
      function renderFAQ(faqList) {
        const $container = $('#faq-container');
        faqList.forEach(item => {
          // 生成单个FAQ的HTML结构
          const faqHtml = `
            <button class="accordion">${item.question}</button>
            <div class="panel">
              <p>${item.answer}</p>
            </div>
          `;
          $container.append(faqHtml);
        });

        // 添加折叠面板的交互逻辑
        $('.accordion').click(function() {
          $(this).toggleClass('active');
          const panel = $(this).next('.panel');
          panel.slideToggle();
        });
      }
    </script>
  </body>
</html>

3. Code.gs保持不变 #

function doGet() {
  return HtmlService
    .createTemplateFromFile('Index')
    .evaluate()
    .setTitle('FAQ Panel'); // 可选：添加页面标题
}

关键改动说明： #

1. 数据获取优化：

   • 直接使用你指定的目标表格（替换掉原来错误的this_file）
   • 一次性获取整个数据范围，避免循环中反复调用getRange，提升性能
   • 返回结构化的对象数组，前端可以直接通过item.question和item.answer访问数据，不需要解析分隔符

2. 前端渲染逻辑：

   • 使用google.script.run安全调用服务器端函数，通过withSuccessHandler处理返回的数据
   • 循环生成你需要的按钮+面板结构，完全匹配你手动编写的目标HTML
   • 额外添加了折叠面板的CSS和交互逻辑，让FAQ面板可以展开/收起（如果不需要可以删掉样式和点击事件）

3. 代码可读性：

   • 重命名了函数（test改为getFAQData），让函数用途更清晰
   • 用const替代var，遵循现代JS语法
   • 添加了注释说明关键步骤

现在你只需要把表格ID替换成你自己的，部署这个Google Script项目，就能看到动态生成的FAQ折叠面板了！

内容的提问来源于stack exchange，提问作者jyp95