如果td值大于10000，则更改td颜色

基础概念

td 是 HTML 表格中的一个单元格元素，用于存储表格数据。通过 CSS 可以控制 td 元素的样式，包括颜色。

类型

根据实现方式不同，可以分为以下几种类型：

内联样式：直接在 HTML 元素中使用 style 属性。
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签。
外部样式表：通过链接外部的 CSS 文件来控制样式。

应用场景

适用于需要根据数据动态展示不同状态的表格，例如：

数据异常提示（如温度超过阈值）
数据状态分类（如已完成、进行中、未开始）

实现方法

假设我们有一个表格，其中某个单元格的值大于 10000 时，我们需要将该单元格的颜色改为红色。可以使用 JavaScript 结合 CSS 来实现。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change TD Color</title>
    <style>
        .highlight {
            background-color: red;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>5000</td>
            <td>15000</td>
        </tr>
        <tr>
            <td>8000</td>
            <td>20000</td>
        </tr>
    </table>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var tds = document.getElementsByTagName('td');
            for (var i = 0; i < tds.length; i++) {
                if (parseInt(tds[i].textContent) > 10000) {
                    tds[i].classList.add('highlight');
                }
            }
        });
    </script>
</body>
</html>