HTML表格实现td值大于1时背景变红（表格随电子表格自动更新）

这个需求完全可以实现，核心是通过JavaScript实时检测表格单元格的数值变化，并动态设置样式。以下是具体实现方式：

步骤1：定义高亮样式 #

先在CSS里定义复用的高亮样式：

.highlight-red {
  background-color: red;
}

步骤2：编写数值判断与高亮函数 #

写一个函数遍历所有<td>元素，判断数值并应用样式：

function highlightOverOneCells() {
  const cells = document.querySelectorAll('td');
  cells.forEach(cell => {
    // 提取单元格文本并转为数字，处理空白或非数字场景
    const cellValue = parseFloat(cell.textContent.trim());
    // 仅当数值有效且大于1时添加高亮样式，否则移除
    if (!isNaN(cellValue) && cellValue > 1) {
      cell.classList.add('highlight-red');
    } else {
      cell.classList.remove('highlight-red');
    }
  });
}

步骤3：绑定触发时机 #

因为表格会自动同步电子表格的更新，需要在内容更新完成后触发上述函数，有三种常见方式：

方式一：利用同步回调（推荐） #

如果你的表格同步工具提供了更新完成的回调事件（比如自定义事件、API回调），直接在回调里执行函数：

// 假设同步完成后会触发spreadsheetUpdated事件
document.addEventListener('spreadsheetUpdated', highlightOverOneCells);

方式二：用MutationObserver监听DOM变化 #

如果无法获取同步回调，可以通过MutationObserver监听表格的DOM变化，一旦内容更新就自动执行高亮逻辑：

const targetTable = document.querySelector('table');
const observer = new MutationObserver(() => {
  highlightOverOneCells();
});

// 配置监听规则：监听表格内所有子节点和文本内容的变化
observer.observe(targetTable, {
  childList: true,
  subtree: true,
  characterData: true
});

方式三：定时器周期性检查（备选） #

如果上述两种方式都无法实现，也可以用定时器定期检查单元格内容：

// 每1秒检查一次，可根据需求调整间隔
setInterval(highlightOverOneCells, 1000);

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