实现表格数值hover对应红/绿关键帧动画的方法

你的现有代码有两处核心问题需要先修正：

1. DOM选择器错误：当前选中的是整个<tbody>元素，而非单个单元格<td>，且事件绑定逻辑执行时机早于fetch异步渲染表格的时间，会拿不到动态生成的单元格
2. 数值比较逻辑存在类型bug：textContent取到的是字符串类型，直接和数字比较会出现判断错误，需要先转成数值类型

修正后的JS逻辑 #

把事件绑定逻辑放到fetch渲染表格完成的回调中执行，避免拿不到动态DOM：

// 替换你原有的hover事件绑定代码，放到fetch渲染表格的.then回调里
fetch('你的JSON数据地址')
  .then(res => res.json())
  .then(data => {
    const tbody = document.getElementById('mytable')
    // --- 这里是你原本的表格渲染逻辑 ---
    // 示例渲染逻辑，替换成你自己的代码即可
    data.forEach(row => {
      const tr = document.createElement('tr')
      // 逐列生成td插入tr
      tbody.appendChild(tr)
    })
    // --- 渲染逻辑结束 ---

    // 渲染完成后再获取所有td单元格绑定事件
    const cells = document.querySelectorAll("#mytable td")
    cells.forEach(cell => {
      // 提前转成数值缓存，避免每次hover重复计算
      const val = Number(cell.textContent.trim())
      cell.addEventListener('mouseenter', () => {
        val < 5 ? cell.classList.add('underfive') : cell.classList.add('abovefive')
      })
      cell.addEventListener('mouseleave', () => {
        // 直接移除两个类，不用重复判断
        cell.classList.remove('underfive', 'abovefive')
      })
    })
  })

配套CSS关键帧代码 #

直接放到你的样式文件中即可，动画时长、颜色值可以自行调整：

/* 表格基础样式，可根据需求调整 */
.table {
  border-collapse: collapse;
  width: 100%;
  background: #ffffff;
}
.table th, .table td {
  border: 1px solid #f0f0f0;
  padding: 10px 14px;
  text-align: center;
}

/* 小于5的红色hover动画 */
@keyframes hoverRed {
  from {
    background-color: #ffffff;
    color: #333333;
  }
  to {
    background-color: #f53f3f;
    color: #ffffff;
  }
}

/* 大于等于5的绿色hover动画 */
@keyframes hoverGreen {
  from {
    background-color: #ffffff;
    color: #333333;
  }
  to {
    background-color: #00b42a;
    color: #ffffff;
  }
}

/* 动画绑定到对应类 */
td.underfive {
  animation: hoverRed 0.2s ease forwards;
}
td.abovefive {
  animation: hoverGreen 0.2s ease forwards;
}

简化方案（可选） #

如果不需要复杂关键帧逻辑，仅需要颜色平滑过渡，可以完全去掉JS事件绑定代码，渲染单元格时给td加上data-val属性存储数值，纯CSS实现效果：

/* 渲染td时添加 <td data-val="单元格数值">xxx</td> */
#mytable td {
  transition: all 0.2s ease;
}
#mytable td:hover {
  color: #fff;
}
#mytable td:is([data-val="0"],[data-val="1"],[data-val="2"],[data-val="3"],[data-val="4"]):hover {
  background-color: #f53f3f;
}
#mytable td:not(:is([data-val="0"],[data-val="1"],[data-val="2"],[data-val="3"],[data-val="4"])):hover {
  background-color: #00b42a;
}

内容的提问来源于stack exchange，提问作者Anthony de Becker