使用Google Sheets数据填充HTML表格行列渲染异常问题

问题根因 #

• 循环顺序完全颠倒：HTML表格的结构要求逐行构建，每行内拼接所有列的单元格，原代码外层遍历列索引、内层遍历行索引，遍历顺序和表格结构要求相反
• 标签拼接逻辑错误：原代码每拼接1个<td>单元格就包裹一层<tr>行标签，导致每个单元格单独占据一行，完全破坏表格行列结构，最终所有数据纵向堆叠
• 冗余的数据拉取逻辑：原代码重复调用工作表接口、多次拉取数据，既增加不必要的API开销，还可能因为行数计算偏差引入多余空行

修复方案 #

只需要修改Google Script端的populateStratTb2函数即可，HTML端代码无需调整：

function populateStratTb2(){
  const sheet = SpreadsheetApp.getActive().getSheetByName('supp_str');
  // 直接获取D列到M列、从第3行开始到最后一行有数据的范围
  const lastRow = sheet.getLastRow();
  if (lastRow < 3) return ""; // 无有效数据时直接返回空
  const data = sheet.getRange("D3:M" + lastRow).getValues();

  let tableRowsHtml = "";
  // 外层遍历每一行数据
  for (let rowIdx = 0; rowIdx < data.length; rowIdx++) {
    tableRowsHtml += "<tr>";
    // 内层遍历当前行的所有列，拼接单元格
    for (let colIdx = 0; colIdx < data[rowIdx].length; colIdx++) {
      tableRowsHtml += `<td>${data[rowIdx][colIdx]}</td>`;
    }
    tableRowsHtml += "</tr>";
  }
  return tableRowsHtml;
}

逻辑说明 #

• 调整循环顺序为先行后列，符合HTML表格的结构要求：每一行数据对应一个<tr>标签，行内每个字段对应一个<td>标签，和Google Sheets的原始行列结构完全匹配
• 移除冗余的范围取值逻辑，直接通过getLastRow()获取工作表最后有数据的行号，减少不必要的接口调用，同时避免行数计算错误
• HTML端原有逻辑会将返回的行片段直接插入id为strattable的表格元素中，结构正确后即可正常渲染出和源表格一致的效果

内容的提问来源于stack exchange，提问作者A. Prats