如何让App Script中HTML文件的循环按行而非单元格执行？

我之前用App Script实现了从Google Sheets指定区域提取数据（含单元格背景色）生成HTML表格并嵌入邮件的功能，现在尝试直接在HTML文件中实现该逻辑。将App Script的嵌套循环改写为HTML模板脚本后，出现每行重复4次（对应每行4个单元格）的问题；而之前使用的单循环虽能正常按行生成表格，却无法获取单元格背景色。需要修正HTML循环语法，解决重复行问题的同时保留单元格背景色。

原有App Script循环代码 #

for (var i = 0; i < data.length; i++) {
    cells = data[i];
    table = table + "<tr>";
    for (var u = 0; u < cells.length; u++) {
      table = table + `<td style="background-color:${backgrounds[i][u]};height:40px;width:100px;text-align:center;font-family:Oswald">` + cells[u] + "</td>";
    }
    table = table + "</tr>";
}

问题HTML代码 #

<tbody>
  <? for (var i = 0; i < tableRangeValues.length; i++){
    cells = tableRangeValues[i];
    for (var u = 0; u < cells.length; u++) {
  ?> 
  <!-- each td is a column -->
  <tr> 
    <td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[0] ?></td>
    <td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[1] ?></td>
    <td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[2] ?></td>
    <td style= "background-color:<?= backgrounds[i][u]?>;height:40px;width:100px;text-align:center;font-family:Oswald"><?= cells[3] ?></td>
  </tr>
  <?} } ?>
</tbody>

正常无背景色的HTML代码 #

<tbody>
  <? for (var i = 0; i < tableRangeValues.length; i++) {row = tableRangeValues[i];?> 
  <tr>
    <td><?= row[0] ?></td>
    <td><?= row[1] ?></td>
    <td><?= row[2] ?></td>
    <td><?= row[3] ?></td>
  </tr>
  <?} ?>
</tbody>

解决方案 #

问题根源：错误代码把<tr>放在了内层循环里，内层循环会执行4次（对应每行4个单元格），每次都生成一整行，导致每行重复4次；同时硬编码cells[0]到cells[3]，没有利用内层循环的索引来获取对应单元格的数据和背景色。

修正后的HTML代码：

<tbody>
  <? for (var i = 0; i < tableRangeValues.length; i++) {
    var cells = tableRangeValues[i];
  ?>
    <tr>
      <? for (var u = 0; u < cells.length; u++) { ?>
        <td style="background-color:<?= backgrounds[i][u] ?>;height:40px;width:100px;text-align:center;font-family:Oswald">
          <?= cells[u] ?>
        </td>
      <? } ?>
    </tr>
  <? } ?>
</tbody>

说明：

• 外层循环负责生成每行的<tr>标签
• 内层循环负责生成当前行的每个<td>标签，利用索引u获取对应单元格的数据cells[u]和背景色backgrounds[i][u]
• 这样每行只会生成一次，同时每个单元格都能正确对应自己的背景色

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