实现谷歌表格联动HTML待办任务列值变化时动态变色

当然可以实现这个需求，核心是跟踪每个Pending Tasks单元格的历史值，每次数据同步时对比新旧值，根据变化调整单元格样式。以下是修改后的完整代码和关键说明：

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function(){
  // 批量获取Pending Tasks列的所有单元格元素
  const pendingElements = [
    document.getElementById('data1'),
    document.getElementById('data2'),
    document.getElementById('data3'),
    document.getElementById('data4'),
    document.getElementById('data5')
  ];
  // 初始化每个单元格的旧值为0（匹配初始状态）
  const oldValues = pendingElements.map(() => '0');

  setInterval(function(){
    google.script.run
      .withSuccessHandler(data => {
        // 处理Pending Tasks列的更新与样式切换
        pendingElements.forEach((el, index) => {
          const newValue = data[index];
          // 对比新旧值，触发样式变化
          if (oldValues[index] === '0' && newValue === '1') {
            el.style.backgroundColor = 'red';
            el.style.color = 'white'; // 搭配白色字体更清晰
          } else if (oldValues[index] === '1' && newValue === '0') {
            el.style.backgroundColor = 'white';
            el.style.color = 'black'; // 恢复默认字体颜色
          }
          // 更新单元格内容和历史值
          el.innerHTML = newValue;
          oldValues[index] = newValue;
        });

        // 批量更新Completed Tasks列内容
        const completedElements = [
          document.getElementById('data6'),
          document.getElementById('data7'),
          document.getElementById('data8'),
          document.getElementById('data9'),
          document.getElementById('data10')
        ];
        completedElements.forEach((el, index) => {
          el.innerHTML = data[index + 5];
        });
      })
      .setAutomatically();
  }, 1000);
});

优化后的CSS代码 #

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

#datatable td, #datatable th { /* 修复原代码中的选择器笔误 */
  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;
}

/* 给Pending Tasks单元格设置默认白色背景 */
#datatable .number {
  background-color: white;
}

HTML代码（无需修改） #

<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">AMOUNT 1</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" >AMOUNT 2</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" >AMOUNT 3</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" >AMOUNT 4</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" >AMOUNT 5</td>
            <td id="data5" style="text-align:center" class="number"></td> 
            <td id="data10" style="text-align:center"></td>                 
        </tr>
      </table>

关键改动说明 #

1. 批量管理元素：用数组替代重复的getElementById调用，代码更简洁易维护
2. 跟踪历史值：通过oldValues数组记录每个单元格的上一次值，确保只有值从0→1或1→0时才触发样式变化
3. 样式精准切换：根据值的变化方向，分别设置红色/白色背景，搭配对应字体颜色保证可读性
4. 修复CSS笔误：原代码中#data-table是错误选择器，修正为#datatable确保样式生效

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