WebApp数据无法同步至Google Sheets的技术求助

我制作了一个WebApp表格，用户填写数据后点击保存按钮，数据应自动同步至Google Sheets，但该功能未生效。

已尝试两种方法：

• 为单个输入框设置独立ID，使用getElementById方法获取数据；
• 通过表格ID，结合rows和columns方法获取数据（示例代码：let label=document.getElementById("Master").rows[0].columns[1].value;）。

相关代码 #

CSS样式 #

<style>
  th {
    font-size : 13px;
    border : 1px solid black;
    border-radius: 5px;
  }
  table {
    margin-top : 20px;
    margin-left : 130px;
    font-size : 15px;
    text-align : center;
    border-spacing : 15px;
    border : 1px solid black;
  }
  td {
    border : 1px solid black;
    border-radius: 5px;
  }
  input {
    width : 56px;
    border : none;
    text-align : center;
  }
  button {
    width : 60px;
  }

  .heading {
    margin-top:50px;
    margin-top:20px;
    text-align:center
  }
</style>

HTML及脚本 #

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  </head>

<body>
  <div class="heading">
  <h2>KTRP FOLLOW UP AND MANAGEMENT SHEET</h2>
  </div>

  <table id="Master">
    <tr>
        <th><b>Working Hours</b></th>
        <th><label type="text">07AM to 08AM</label></th>
    </tr>
    
    <tr>
      <td style="background-color:#B978F0">
        <label><b>Reference</b></label>
      </td>
      <td style="border:1px white">
       <select id="mod">
       <option>V853132</option>
       <option>AB35469</option>
       <option>AB35511</option>
       <option>VC61764</option>
       <option>VC78159</option>
       <option>AB32871</option>
       <option>VC78183</option>
       </select>
      </td>
    </tr>
   
    <tr>
      <td style="background-color:#00FF00"><label><b>Good Parts Qty</b></label></td>
      <td><input type="number" id="gqty"></td>
   </tr>
   
   <tr>
      <td style="background-color:#FC0808"><label><b>Bad Parts Qty</b></label></td>
      <td><input type="number" id="bqty"></td>
   </tr>
   
   <tr>
      <td style="background-color:#FFFF00"><label><b>Preventive Maintenance</b></label></td>
      <td><input type="number" id="pmaint"></td>
   </tr>
   
   <tr>
      <td style="background-color:#FFFF00"><label><b>Planned Stoppage</b></label></td>
      <td><input type="number" id="trial0"></td>
    </tr>
    
     <tr>
      <td style="background-color:#93C47D"><label><b>Changeover</b></label></td>
      <td><input type="number" id="co"></td>
      </tr>

    <tr>
      <td style="background-color:#93C47D"><label><b>Legal Breaks</b></label></td>
      <td><input type="number" id="break"></td>
      </tr>
      
      <tr>
      <td style="background-color:#E83C3C"><label><b>Non quality stops</b></label></td>
      <td><input type="number" id="nqstop"></td>
      </tr>
      
      <tr>
        <td style="background-color:#76A5AF"><label><b>Breakdowns</b></label></td>
      <td><input type="number" id="bds"></td>
      </tr>
      
      <tr>
      <td style="background-color:#76A5AF"><label><b>Micro Stoppages</b></label></td>
      <td><input type="number" id="msds"></td>
      </tr>
      
       <tr>
      <td style="background-color:#A38BE9"><label><b>Organisation Malfunctions</b></label></td>
      <td><input type="number" id="org"></td>
      </tr>

      <tr>
      <td><label><b>Direct Labour</b></label></td>
      <td><input type="number" id="dl"></td>
      </tr>
      
      
      <tr>
      <td style="border:1px white"> </td>
      <td style="border:1px white"><button id="btn">Save</button></td>
      </tr>
      
       </table>
       <script>
    document.getElementById("btn").addEventListener("click",doSave);

      function doSave() {
        // 修正对象字面量语法，以及DOM获取方式
        let prodDetails = {
          label: document.getElementById("Master").rows[0].cells[1].textContent,
          model: document.getElementById("mod").value,
          goodpartsqty: document.getElementById("gqty").value,
          badpartsqty: document.getElementById("bqty").value,
          preventivemaint: document.getElementById("pmaint").value,
          plannedstop: document.getElementById("trial0").value,
          changeover: document.getElementById("co").value,
          legalbreak: document.getElementById("break").value,
          nonquality: document.getElementById("nqstop").value,
          breakdown: document.getElementById("bds").value,
          microstoppage: document.getElementById("msds").value,
          organisation: document.getElementById("org").value,
          directlabour: document.getElementById("dl").value
        };

        google.script.run.dataSave(prodDetails);
      }
    </script>

</body>
</html>

问题排查及修正要点 #

1. JavaScript对象语法错误：原代码中对象属性赋值使用=，正确语法应为:，这会直接导致脚本报错终止执行。
2. DOM元素获取错误：表格行没有columns属性，需改为cells；另外原HTML中有多个空的<tr>标签，会导致rows索引偏移，需删除这些空行。
3. 数据获取方式优化：直接通过输入框/下拉框的ID获取值比遍历表格行更可靠，避免因DOM结构变化导致索引错误。
4. Google Apps Script端检查：确保dataSave函数正确接收参数，示例如下：

function dataSave(prodDetails) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("目标工作表名称");
  // 将对象值转为数组，按顺序写入表格
  const rowData = [
    prodDetails.label,
    prodDetails.model,
    prodDetails.goodpartsqty,
    prodDetails.badpartsqty,
    prodDetails.preventivemaint,
    prodDetails.plannedstop,
    prodDetails.changeover,
    prodDetails.legalbreak,
    prodDetails.nonquality,
    prodDetails.breakdown,
    prodDetails.microstoppage,
    prodDetails.organisation,
    prodDetails.directlabour
  ];
  sheet.appendRow(rowData);
}

同时需确保WebApp部署时设置了正确的权限（允许访问者使用），且脚本有编辑表格的权限。

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