使用JavaScript的if/else动态修改HTML表格CSS样式求助

核心方案 #

由于页面会自动刷新，必须确保每次页面加载完成后重新执行数值判断逻辑，这样新渲染的表格数据才能被正确处理。

具体实现步骤 #

1. 编写JavaScript判断函数 #

遍历目标单元格，将内容转为整数后与阈值对比，设置对应样式：

function highlightOverThreshold() {
    // 自定义阈值，根据需求修改
    const threshold = 100;
    // 选择需要判断的单元格，这里用类名精准定位，避免影响其他单元格
    const cells = document.querySelectorAll('.value-cell');
    
    cells.forEach(cell => {
        // 提取内容并转为整数，同时处理空值或非数字情况
        const value = parseInt(cell.textContent.trim(), 10);
        // 仅对有效数字做判断
        if (!isNaN(value) && value > threshold) {
            cell.classList.add('highlight');
        } else {
            cell.classList.remove('highlight');
        }
    });
}

2. 绑定页面加载事件 #

确保首次加载和每次刷新后都自动执行判断函数：

// 页面加载完成后触发函数
window.addEventListener('load', highlightOverThreshold);

3. 配合PHP渲染表格的注意事项 #

• 后端仅负责输出原始数据，样式判断全交给前端JS，避免耦合
• 给需要判断的数值单元格添加统一类名，比如：

// PHP渲染表格行示例
echo "<tr>";
echo "<td>" . $row['ID'] . "</td>";
// 给数值单元格加类名
echo "<td class='value-cell'>" . $row['target_field'] . "</td>";
echo "</tr>";

4. 用CSS类维护样式（更易修改） #

定义CSS类代替行内样式，方便后续调整：

.highlight {
    background-color: #ffcccc; /* 超过阈值的背景色，可自定义 */
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

完整整合代码示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据监控表格</title>
    <!-- 10秒自动刷新，可修改时间 -->
    <meta http-equiv="refresh" content="10">
    <style>
        .highlight {
            background-color: #ffcccc;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>监控数值</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <?php
            // 这里替换成你的MSSQL连接查询代码
            // 示例：
            // $serverName = "你的服务器";
            // $connectionInfo = array( "Database"=>"你的库名", "UID"=>"账号", "PWD"=>"密码");
            // $conn = sqlsrv_connect($serverName, $connectionInfo);
            // if($conn === false) {
            //     die( print_r( sqlsrv_errors(), true));
            // }
            // $sql = "SELECT * FROM 监控表";
            // $stmt = sqlsrv_query($conn, $sql);
            // if($stmt === false) {
            //     die( print_r( sqlsrv_errors(), true));
            // }
            // while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
            //     echo "<tr>";
            //     echo "<td>" . $row['id'] . "</td>";
            //     echo "<td class='value-cell'>" . $row['monitor_value'] . "</td>";
            //     echo "<td>" . $row['remark'] . "</td>";
            //     echo "</tr>";
            // }
            // sqlsrv_free_stmt($stmt);
            // sqlsrv_close($conn);
            ?>
        </tbody>
    </table>

    <script>
        function highlightOverThreshold() {
            const threshold = 100;
            const cells = document.querySelectorAll('.value-cell');
            
            cells.forEach(cell => {
                const value = parseInt(cell.textContent.trim(), 10);
                if (!isNaN(value) && value > threshold) {
                    cell.classList.add('highlight');
                } else {
                    cell.classList.remove('highlight');
                }
            });
        }

        window.addEventListener('load', highlightOverThreshold);
    </script>
</body>
</html>

关键细节提醒 #

• 使用parseInt时必须加第二个参数10，避免把以0开头的数字解析成八进制
• 一定要判断isNaN，防止单元格内容为非数字时出现逻辑错误
• 自动刷新依赖meta标签时，window.load事件会在每次刷新后触发，保证逻辑重复执行

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