Ajax更新PHP表格数据时CSS样式异常问题求助

核心问题是DOM结构非法嵌套导致样式异常：

• 前端页面已存在一个ID为my-table的完整表格
• 后端tables-data.php返回了包含相同ID、class的完整table标签
• 执行$("#my-table").html(data)时，新表格会被嵌套进原表格内部，形成<table><table>...</table></table>的错误结构，直接破坏CSS选择器匹配逻辑
• 你尝试替换为$("#my-table tbody").html(data)时，因后端返回完整table，会导致<tbody><table>...</table></tbody>的非法结构，样式依然异常

1. 修改后端tables-data.php，仅返回表格行内容 #

删除完整的table、thead、tbody标签，只输出tbody内的表格行：

<?php 
include('connect.php');
session_start();

$query = "SELECT * FROM temperature WHERE (ID_systeme, date, heure) IN (SELECT ID_systeme, MAX(date), MAX(heure) FROM temperature GROUP BY ID_systeme) ORDER BY heure DESC";
$result = mysqli_query($connect, $query);

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result))  {
        echo '<tr>';
        echo '<th scope="row">' . $row["ID_systeme"] . '</th>';
        echo '<td>' . $row["capteur1"] . '</td>';
        echo '<td>' . $row["capteur2"] . '</td>';
        echo '<td>' . $row["capteur3"] . '</td>';
        echo '<td>' . $row["capteur4"] . '</td>';
        echo '<td>' . $row["heure"] . '</td>';
        echo '<td>' . $row["date"] . '</td>';
        echo '</tr>';
    }
}
?>

2. 调整前端Ajax逻辑，仅更新tbody内容 #

确保前端页面保留完整的基础表格结构（仅加载一次），Ajax只替换tbody内的行：

<!-- 前端页面的基础表格结构 -->
<table class="table datatable bg-warning-light" id="my-table">
    <thead>
        <tr>
            <th scope="col">ID systeme</th>
            <th scope="col">capteur1</th>
            <th scope="col">capteur2</th>
            <th scope="col">capteur3</th>
            <th scope="col">capteur4</th>
            <th scope="col">heure</th>
            <th scope="col">date</th>
        </tr>
    </thead>
    <tbody id="table-body">
        <!-- 初始数据由后端渲染或首次Ajax加载 -->
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    function refreshTable() {
        $.ajax({
            url: "tables-data.php",
            cache: false,
            success: function(data) {
                // 仅更新tbody内容
                $("#table-body").html(data);
                
                // 若使用datatable插件，需重新初始化以恢复插件功能
                if ($.fn.DataTable.isDataTable('#my-table')) {
                    $('#my-table').DataTable().destroy();
                }
                $('#my-table').DataTable();
            }
        });
    }

    // 页面加载时先执行一次
    refreshTable();
    // 每5秒刷新一次
    setInterval(refreshTable, 5000);
});
</script>

额外注意事项 #

• 若使用datatable插件，直接替换tbody内容会导致插件的排序、分页等功能失效，必须重新初始化
• 确保前端基础表格的class、ID仅定义一次，避免重复DOM元素引发样式冲突
• 可优化Ajax请求，仅获取新增数据而非全量数据，提升性能

内容的提问来源于stack exchange，提问作者nour el'houda ziane