如何用Google Apps Script通过按钮获取单选框值并更新表格

需要完成两个核心功能：

• 获取页面单选框（绿色、黄色、红色）的选中值，更新到Google表格的D列对应行
• 每次点击按钮时自动递增行号，实现逐行依次更新

修改后的index.html #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    // 页面加载时获取当前待更新行号
    window.onload = function() {
      google.script.run
        .withSuccessHandler(rowNum => {
          document.getElementById('currentRow').textContent = `当前更新行：第${rowNum}行`;
        })
        .getCurrentRow();
    };

    function clickMe() {
      // 获取选中的单选框值
      const selectedColor = document.querySelector('input[name="color"]:checked')?.value;
      if (!selectedColor) {
        showAlert('请选择一个颜色');
        return;
      }

      google.script.run
        .withSuccessHandler(result => {
          showAlert(`已更新第${result.row}行D列为：${result.color}`);
          // 更新页面显示的下一行号
          document.getElementById('currentRow').textContent = `当前更新行：第${result.nextRow}行`;
        })
        .updateSheetColor(selectedColor);
    }
    
    function showAlert(message) {
      document.getElementById('message').innerHTML = message;
    }
  </script>
</head>
<body>
  <h2>更新表格颜色</h2>
  <div id="currentRow" style="margin-bottom:10px;"></div>
  <div id="message" style="color:green;margin-bottom:15px;"></div>

  <input type="radio" id="green" name="color" value="GREEN">
  <label for="green">绿色</label><br>
  <input type="radio" id="yellow" name="color" value="YELLOW">
  <label for="yellow">黄色</label><br>
  <input type="radio" id="red" name="color" value="RED">
  <label for="red">红色</label>

  <p><button onclick="clickMe(); return false;">确认更新</button></p>
</body>
</html>

修改后的Code.gs #

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("表格颜色更新工具");
}

// 获取当前待更新的行号，首次运行默认从第1行开始
function getCurrentRow() {
  const props = PropertiesService.getScriptProperties();
  let currentRow = props.getProperty('currentRow');
  if (!currentRow) {
    currentRow = '1';
    props.setProperty('currentRow', currentRow);
  }
  return parseInt(currentRow);
}

// 更新表格D列并递增行号
function updateSheetColor(selectedColor) {
  const sheetID = "abc123"; // 替换为你的表格ID
  const sheet = SpreadsheetApp.openById(sheetID).getSheetByName("alpha");
  const props = PropertiesService.getScriptProperties();
  
  // 获取当前行号
  let currentRow = parseInt(props.getProperty('currentRow'));
  
  // 更新D列（第4列）对应行的颜色值
  sheet.getRange(currentRow, 4).setValue(selectedColor);
  
  // 递增行号并保存状态
  const nextRow = currentRow + 1;
  props.setProperty('currentRow', nextRow.toString());
  
  // 返回更新结果给前端
  return {
    row: currentRow,
    color: selectedColor,
    nextRow: nextRow
  };
}

关键改动说明 #

1. 前端逻辑优化

   • 页面加载时自动拉取当前待更新行号，直观展示给用户
   • 增加颜色选择校验，避免空值提交
   • 成功更新后实时刷新行号显示，反馈操作结果

2. 后端逻辑优化

   • 利用PropertiesService存储行号状态，实现跨请求的行号持久化
   • 拆分功能为getCurrentRow()和updateSheetColor()，职责更清晰
   • 简化表格操作，直接定位目标单元格更新，提升执行效率

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