如何在Google Apps Script搭建的Web应用表格中高亮含指定值的行

实现步骤 #

你只需要修改INDEX.HTML文件的两处代码即可实现需求，无需调整后端CODE.JS逻辑： #

1. 新增高亮样式

找到head标签内的<style>块，添加ABSENT行的高亮样式：

<style>
/* 原有注释保留即可 */
.absent-row {
  background-color: #c82333 !important;
}
</style>

这里用的是适配暗色表格的深红色，你可以自行替换成其他颜色值。 #

2. 修改表格行渲染逻辑

找到createTable函数中循环生成表格行的代码段，调整<tr>标签的生成逻辑，判断STATUS列值为ABSENT时添加高亮类：
原代码：

for(var i=0; i<dataArray.length; i++) {
    result += "<tr>";
    for(var j=0; j<dataArray[i].length; j++){
        result += "<td>"+dataArray[i][j]+"</td>";
    }
    result += "</tr>";
}

修改后：

for(var i=0; i<dataArray.length; i++) {
    // 第6列（索引为5）对应STATUS字段，判断值是否为ABSENT
    const rowClass = dataArray[i][5] === 'ABSENT' ? 'class="absent-row"' : '';
    result += `<tr ${rowClass}>`;
    for(var j=0; j<dataArray[i].length; j++){
        result += "<td>"+dataArray[i][j]+"</td>";
    }
    result += "</tr>";
}

修改完成后重新部署Web App即可生效，所有STATUS为ABSENT的行会自动高亮显示。

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