根据阈值为指定HTML表格实现绿黄红三色动态变色需求

这里有一个完整的可运行解决方案，能帮你给id="customers"的表格实现数值单元格根据阈值在绿、黄、红三色间切换的功能，我会一步步拆解细节：

完整代码示例 #

<html>
<head>
    <style>
        /* 定义三种延迟对应的样式类 */
        .low-latency { background-color: #90EE90; } /* 绿色：低延迟 */
        .medium-latency { background-color: #FFFFE0; } /* 黄色：中等延迟 */
        .high-latency { background-color: #FFCCCB; } /* 红色：高延迟 */
        
        /* 可选：美化表格，提升可读性 */
        #customers {
            border-collapse: collapse;
            width: 100%;
            font-family: Arial, sans-serif;
        }
        #customers th, #customers td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        #customers th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id='customers'>
        <tr>
            <th>Router</th>
            <th>Hong Kong</th>
            <th>Singapore</th>
            <th>East (Newark)</th>
            <th>Central (Denver)</th>
            <th>West coast (LA)</th>
            <th>Montreal</th>
            <th>Paris</th>
            <th>AMS</th>
            <th>London</th>
        </tr>
        <tr>
            <th>Hong Kong</th>
            <td>N/A</td>
            <td>34.95</td>
            <td>222.34</td>
            <td>175.97</td>
            <td>147.18</td>
            <td>234.99</td>
            <td>260.47</td>
            <td>250.88</td>
            <td>277.79</td>
        </tr>
        <tr>
            <th>Singapore</th>
            <td>35.01</td>
            <td>N/A</td>
            <td>244.28</td>
            <td>197.94</td>
            <td>185.47</td>
            <td>250.01</td>
            <td>158.67</td>
            <td>168.75</td>
            <td>251.44</td>
        </tr>
        <tr>
            <th>East (Newark)</th>
            <td>225.09</td>
            <td>235.61</td>
            <td>N/A</td>
            <td>40.49</td>
            <td>73.11</td>
            <td>9.11</td>
            <td>78.74</td>
            <td>75.46</td>
            <td>69.98</td>
        </tr>
        <tr>
            <th>Central (Denver)</th>
            <td>184.44</td>
            <td>203.51</td>
            <td>46.41</td>
            <td>N/A</td>
            <td>41.78</td>
            <td>42.55</td>
            <td>115.15</td>
            <td>127.17</td>
            <td>110.58</td>
        </tr>
        <tr>
            <th>West coast (LA)</th>
            <td>162.93</td>
            <td>171.4</td>
            <td>71.61</td>
            <td>37.85</td>
            <td>N/A</td>
            <td>88.81</td>
            <td>149.18</td>
            <td>147.34</td>
            <td>140.41</td>
        </tr>
        <tr>
            <th>Montreal</th>
            <td>227.71</td>
            <td>253.18</td>
            <td>9.11</td>
            <td>42.67</td>
            <td>88.69</td>
            <td>N/A</td>
            <td>85.89</td>
            <td>84.59</td>
            <td>79.01</td>
        </tr>
        <tr>
            <th>Paris</th>
            <td>233.03</td>
            <td>161.62</td>
            <td>78.44</td>
            <td>112.98</td>
            <td>149.44</td>
            <td>86.06</td>
            <td>N/A</td>
            <td>11.11</td>
            <td>9.05</td>
        </tr>
        <tr>
            <th>AMS</th>
            <td>254.16</td>
            <td>164.82</td>
            <td>77.27</td>
            <td>118.53</td>
            <td>147.23</td>
            <td>83.41</td>
            <td>11.22</td>
            <td>N/A</td>
            <td>6.09</td>
        </tr>
        <tr>
            <th>London</th>
            <td>251.09</td>
            <td>167.94</td>
            <td>70.58</td>
            <td>121.16</td>
            <td>141.18</td>
            <td>79.27</td>
            <td>9.81</td>
            <td>6.07</td>
            <td>N/A</td>
        </tr>
    </table>

    <script>
        // 等待页面DOM完全加载后执行逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('customers');
            // 获取所有数据行，跳过第一行表头
            const rows = table.querySelectorAll('tr:not(:first-child)');
            
            rows.forEach(row => {
                // 遍历当前行的所有单元格，跳过第一个Router名称单元格
                const cells = row.querySelectorAll('td');
                cells.forEach(cell => {
                    const cellContent = cell.textContent.trim();
                    // 跳过内容为N/A的单元格
                    if (cellContent === 'N/A') return;
                    
                    const numericValue = parseFloat(cellContent);
                    // 确保转换为数值成功后，判断阈值区间
                    if (!isNaN(numericValue)) {
                        if (numericValue <= 50) {
                            cell.classList.add('low-latency');
                        } else if (numericValue <= 150) {
                            cell.classList.add('medium-latency');
                        } else {
                            cell.classList.add('high-latency');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

关键功能拆解 #

1. 样式定义 #

我在<head>里添加了三个CSS类，分别对应三种颜色状态：

• low-latency：浅绿色，对应数值≤50的低延迟场景
• medium-latency：浅黄色，对应50<数值≤150的中等延迟场景
• high-latency：浅红色，对应数值>150的高延迟场景

另外加了基础的表格美化样式，让表格边框合并、单元格对齐，提升可读性。

2. JavaScript逻辑实现 #

• 用DOMContentLoaded事件确保页面元素加载完成后再执行代码，避免找不到表格元素的问题
• 遍历表格的所有数据行（跳过第一行表头），再遍历每行的单元格
• 跳过内容为N/A的单元格，把有效内容转为数值
• 根据数值所在的阈值区间，给单元格添加对应的样式类

3. 自定义调整 #

如果需要修改阈值或者颜色，非常简单：

• 调整阈值：修改JavaScript里的if/else判断条件即可，比如把绿色阈值改成≤30，只需要把numericValue <= 50改成numericValue <=30
• 修改颜色：替换CSS里的background-color值，比如用更专业的主题色：#4CAF50（深绿）、#FFC107（亮黄）、#F44336（深红）

内容的提问来源于stack exchange，提问作者itsvinit