基于App Script的HTML表格：值大于0时自动变更字体颜色需求

核心修改点 #

• 将行变色逻辑封装为独立函数，确保每次数据更新后自动执行，和2秒刷新机制同步
• 调整样式目标：从单元格背景改为整行字体颜色，匹配需求
• 优化DOM操作，减少重复元素获取

修改后的完整代码 #

JavaScript 代码

document.addEventListener('DOMContentLoaded', function() {
  // 封装行变色逻辑为独立函数
  function highlightRowsWithPositiveValues() {
    const numberCells = document.getElementsByClassName("number");
    for (let cell of numberCells) {
      const value = parseFloat(cell.textContent || cell.innerText);
      // 获取当前单元格所在的行
      const row = cell.closest('tr');
      // 根据数值设置行字体颜色，数值<=0时恢复默认黑色
      row.style.color = value > 0 ? 'red' : 'black';
    }
  }

  setInterval(function() {
    const dataElements = [
      document.getElementById('data1'),
      document.getElementById('data2'),
      document.getElementById('data3'),
      document.getElementById('data4'),
      document.getElementById('data5'),
      document.getElementById('data6'),
      document.getElementById('data7'),
      document.getElementById('data8'),
      document.getElementById('data9'),
      document.getElementById('data10')
    ];

    google.script.run
      .withSuccessHandler(data => {
        // 批量更新数据
        dataElements.forEach((el, index) => {
          el.innerHTML = data[index];
        });
        // 数据更新后立即执行行变色逻辑
        highlightRowsWithPositiveValues();
      })
      .setAutomatically();
  }, 2000) // 改为2秒刷新，匹配需求描述

  // 页面加载完成后执行一次初始变色
  highlightRowsWithPositiveValues();
});

CSS 代码

#datatable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  color: black;
  width: 100%;
}

#datatable td,
#datatable th { /* 修正原CSS中的选择器错误：#data-table -> #datatable */
  border: 1px solid #ddd;
  padding: 8px;
}

#datatable tr:nth-child(even) {
  background-color: #f2f2f2;
}

#datatable tr:hover {
  background-color: #ddd;
}

#datatable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: teal;
  color: white;
}

HTML 代码

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>

<table id="datatable" class="table table-striped table-sm table-hover table-bordered">
  <tr>
    <th>Commercial Tasks</th>
    <th># of Pending Tasks</th>
    <th># Completed Tasks</th>
  </tr>
  <tr>
    <td style="font-weight: bold" width="250">Credit Bag</td>
    <td id="data1" style="text-align:center" class="number"></td>
    <td id="data6" style="text-align:center"></td>
  </tr>
  <tr>
    <td style="font-weight: bold">Exclusivity</td>
    <td id="data2" style="text-align:center" class="number"></td>
    <td id="data7" style="text-align:center"></td>
  </tr>
  <tr>
    <td style="font-weight: bold">CBD Removal</td>
    <td id="data3" style="text-align:center" class="number"></td>
    <td id="data8" style="text-align:center"></td>
  </tr>
  <tr>
    <td style="font-weight: bold">Churn Single Site</td>
    <td id="data4" style="text-align:center" class="number"></td>
    <td id="data9" style="text-align:center"></td>
  </tr>
  <tr>
    <td style="font-weight: bold">Churn Non Single Site</td>
    <td id="data5" style="text-align:center" class="number"></td>
    <td id="data10" style="text-align:center"></td>
  </tr>
</table>

关键说明 #

1. 同步执行逻辑：在google.script.run的成功回调中，更新完数据后立即调用highlightRowsWithPositiveValues()，确保每次数据刷新后都能实时更新行颜色
2. 整行变色：通过cell.closest('tr')获取单元格所在的行，直接修改行的color样式，实现整行字体变红
3. 状态重置：当数值<=0时，将行颜色恢复为默认黑色，避免数据变化后样式残留
4. 修正CSS错误：原代码中#data-table th是错误选择器，改为#datatable th确保样式生效

内容的提问来源于stack exchange，提问作者John Emmanuel Dela Cruz