如何通过Google Apps Script为Google Sheets生成的HTML表格设置单元格背景色

核心错误修正：JavaScript端背景色设置写法 #

你之前使用的col2.style.backgroundColor(r[2])是错误的，因为style.backgroundColor是DOM元素的属性而非方法，正确写法是直接赋值：

col2.style.backgroundColor = r[2];

优化Google Apps Script端代码（提升效率+修正背景色获取逻辑） #

原脚本中循环内的getRange调用存在范围错误，会一次性获取大片区域的背景色而非单个单元格，且反复调用getRange会降低执行效率。建议一次性获取所有需要的背景色数组，再对应添加到数据集中：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("BeneficiaryData");
}

function getTableData() {
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("sheet1");
  var lastRow = ws.getLastRow();
  
  // 一次性获取数据和第2列的背景色数组
  var data = ws.getRange(2, 1, lastRow - 1, 2).getValues();
  var bgColours = ws.getRange(2, 2, lastRow - 1).getBackgrounds();
  
  // 将背景色对应添加到每条数据中
  for (var counter = 0; counter < data.length; counter++) {
    data[counter].push(bgColours[counter][0]);
  }
  
  return data;
}

修正后的HTML脚本部分 #

document.addEventListener("DOMContentLoaded",function(){
   google.script.run.withSuccessHandler(generateTable).getTableData();
});

function generateTable(dataArray){
  var tbody = document.getElementById("table-body");
  dataArray.forEach(function(r){
    var row = document.createElement("tr");
    var col1 = document.createElement("td");
    col1.textContent = r[0];
    var col2 = document.createElement("td");
    col2.textContent = r[1];
    // 正确设置背景色
    col2.style.backgroundColor = r[2];
    row.appendChild(col1);
    row.appendChild(col2);
    tbody.appendChild(row);
  });
}

完成以上修改后，HTML表格的第2列单元格就能正确继承Google Sheets中对应单元格的背景色了。

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