使用JavaScript填充Main.html表格失败，数据为空求解决方案

尝试通过JavaScript从电子表格获取数据填充到Main.html的表格，但表格始终为空。相关代码如下：

Main.html #

<table class="table table-hover">
<thead>
<tr>
<th>Pembeli</th>
<th>Penjual</th>
<th>No. HP</th>
<th>Harga</th>
<th>Status</th>
<th>Tanggal</th>
<th>Aksi</th>
</tr>
</thead>

<tbody id="tableBody-pulsa">
</tbody> 
</table>

</main>

<template id="rowTemplate">
<tr>
<td class="template-pembeli"></td>
<td class="template-penjual"></td>
<td class="template-nohp"></td>
<td class="template-harga"></td>
<td class="template-status"></td>
<td class="template-tanggal"></td>
<td class="template-aksi"><i class="bi bi-pencil-square button-edit"></i><i class="bi bi-trash button-hapus"></i></td>
</tr>
</template>

bacatransaksi.gs #

function tampilkantransaksi() {
  // 补充sheetPulsa的定义，替换为你的实际表格名称
  const sheetPulsa = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("TransaksiPulsa");
  const dataTransaksi = sheetPulsa.getDataRange().getDisplayValues();
  dataTransaksi.shift(); // 移除表头行
  if (dataTransaksi.length === 0 ){
    return "Tidak ada transaksi untuk ditampilkan";
  }
  console.log(dataTransaksi);
  return dataTransaksi;
}

JS.html（原错误代码） #

function cariData(){
google.script.run
tampilkantransaksi();
.withSuccessHandler(dataTransaksi=>{
let tableBody = document.getElementById("tableBody-pulsa");
var template = document.getElementById("rowTemplate");
var templateContent = template.content;

dataTransaksi.forEach( pulsa =>{
const tr = templateContent.cloneNode(true);

const pembeliCol = tr.querySelector(".template-pembeli");
const penjualCol = tr.querySelector(".template-penjual");
const nohpCol = tr.querySelector(".template-nohp");
const hargaCol = tr.querySelector(".template-harga");
const statusCol = tr.querySelector(".template-status");
const tanggalCol = tr.querySelector(".template-tanggal");
const editButton = tr.querySelector(".button-edit");
const deleteButton = tr.querySelector(".template-delete");


pembeliCol.textContent = pulsa[1];
penjualCol.textContent = pulsa[2];
nohpCol.textContent = pulsa[3];
hargaCol.textContent = pulsa[4];
statusCol.textContent = pulsa[5];
tanggalCol.textContent = pulsa[6];
editButton.dataset.id = pulsa[0];
deleteButton.dataset.id = pulsa[0];

tableBody.appendChild(tr);

  })
})
.tampilkantransaksi();
}

错误分析与修复步骤 #

1. google.script.run调用顺序错误
   原代码拆分了链式调用逻辑，先执行tampilkantransaksi()再绑定withSuccessHandler，最后重复调用函数，导致回调无法正确触发。正确写法是连续链式调用。

2. 删除按钮选择器不匹配
   模板中删除按钮的类是button-hapus，但JS代码用.template-delete查找，会找不到元素抛出错误，中断后续代码执行。

3. sheetPulsa未定义
   原gs代码缺少表格对象的定义，必须补充获取表格的代码，替换为你的实际表格名称。

4. 空数据未处理
   当返回空数据提示字符串时，原JS代码会执行forEach导致报错，需要补充字符串类型的判断逻辑。

修复后的JS.html代码 #

function cariData(){
  google.script.run
    .tampilkantransaksi()
    .withSuccessHandler(dataTransaksi=>{
      const tableBody = document.getElementById("tableBody-pulsa");
      // 清空表格原有内容
      tableBody.innerHTML = "";
      
      // 处理空数据情况
      if (typeof dataTransaksi === "string") {
        const emptyRow = document.createElement("tr");
        const emptyCell = document.createElement("td");
        emptyCell.colSpan = 7;
        emptyCell.textContent = dataTransaksi;
        emptyRow.appendChild(emptyCell);
        tableBody.appendChild(emptyRow);
        return;
      }

      const template = document.getElementById("rowTemplate");
      const templateContent = template.content;

      dataTransaksi.forEach(pulsa =>{
        const tr = templateContent.cloneNode(true);

        const pembeliCol = tr.querySelector(".template-pembeli");
        const penjualCol = tr.querySelector(".template-penjual");
        const nohpCol = tr.querySelector(".template-nohp");
        const hargaCol = tr.querySelector(".template-harga");
        const statusCol = tr.querySelector(".template-status");
        const tanggalCol = tr.querySelector(".template-tanggal");
        const editButton = tr.querySelector(".button-edit");
        const deleteButton = tr.querySelector(".button-hapus"); // 修正选择器

        pembeliCol.textContent = pulsa[1];
        penjualCol.textContent = pulsa[2];
        nohpCol.textContent = pulsa[3];
        hargaCol.textContent = pulsa[4];
        statusCol.textContent = pulsa[5];
        tanggalCol.textContent = pulsa[6];
        editButton.dataset.id = pulsa[0];
        if (deleteButton) { // 增加存在性判断，避免报错
          deleteButton.dataset.id = pulsa[0];
        }

        tableBody.appendChild(tr);
      });
    })
    .withFailureHandler(error => {
      // 捕获错误并打印到控制台，方便调试
      console.error("获取数据失败:", error);
      const tableBody = document.getElementById("tableBody-pulsa");
      tableBody.innerHTML = `<tr><td colspan="7">加载数据时出错：${error.message}</td></tr>`;
    });
}

额外调试建议 #

• 打开浏览器开发者工具（F12），查看控制台报错信息，定位具体问题。
• 确认cariData()函数是否被正确触发（比如页面加载时调用，或通过按钮点击触发）。
• 检查Google表格权限，确保脚本能正常访问表格数据。

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