setInterval函数未执行及MySQL数据更新表格重复行问题求助

嘿，很高兴看到你已经搞定了setInterval不执行的问题！现在咱们来解决更新时新增行（而非替换原有数据）的问题——核心原因很简单：你用了append()方法，它会把新内容追加到现有内容后面，而不是替换掉原有内容。

下面给你两种实用的解决方案，按需选择：

方案1：清空表格后重新渲染（简单直接，适合小数据量） #

这个方法最容易实现，每次更新前先清空表格tbody里的所有内容，再重新渲染所有数据行，确保内容完全同步。

修改你的updateTable函数里的success回调部分：

success: function(response){
    // 先清空tbody的现有内容
    $("#userTable tbody").empty();
    var len = response.length;
    for(var i=0; i<len; i++){
        var beacon = response[i].beacon;
        var location = response[i].location;
        // 补上初始渲染时的时间单元格，避免更新后行结构不一致
        var tr_str = "<tr>" +
            "<td align='center'>" + beacon + "</td>" +
            "<td align='center'> <span class='minutes'>00</span>:<span class='seconds'>00</span> </td>" +
            "</tr>";
        $("#userTable tbody").append(tr_str);
    }
}

优化建议：抽离复用渲染逻辑 #

为了避免重复写渲染代码，你可以把渲染表格的逻辑抽成一个独立函数，初始加载和更新都调用它，让代码更整洁：

// 抽离的通用渲染函数
function renderTable(response) {
    $("#userTable tbody").empty();
    var len = response.length;
    for(var i=0; i<len; i++){
        var beacon = response[i].beacon;
        var location = response[i].location;
        var tr_str = "<tr>" +
            "<td align='center'>" + beacon + "</td>" +
            "<td align='center'> <span class='minutes'>00</span>:<span class='seconds'>00</span> </td>" +
            "</tr>";
        $("#userTable tbody").append(tr_str);
    }
}

// 初始加载
$(document).ready(function(){
    console.log(1+0);
    $.ajax({
        url: 'fetch.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            renderTable(response);
            setInterval(updateTable, 10000);
        }
    })
})

// 更新函数
function updateTable() {
    console.log(1+1);
    $.ajax({
        url: 'fetch.php',
        type: 'get',
        dataType: 'JSON',
        success: function(response){
            renderTable(response);
        }
    });
};

方案2：根据唯一标识更新行（适合大数据量，性能更好） #

如果你的数据量比较大，不想每次都清空重绘，可以给每一行加一个唯一标识（比如beacon字段），更新时只修改对应行的内容，不存在的行再新增，还能移除已不存在的旧数据行，减少不必要的DOM操作。

步骤1：修改初始渲染的行，添加唯一标识 #

给<tr>加上data-beacon属性，用来匹配对应数据：

var tr_str = "<tr data-beacon='" + beacon + "'>" +
    "<td align='center'>" + beacon + "</td>" +
    "<td align='center'> <span class='minutes'>00</span>:<span class='seconds'>00</span> </td>" +
    "</tr>";

步骤2：修改updateTable的success回调 #

success: function(response){
    var len = response.length;
    // 收集当前所有的beacon值，用于后续移除旧行
    var currentBeacons = response.map(item => item.beacon);

    for(var i=0; i<len; i++){
        var beacon = response[i].beacon;
        var location = response[i].location;
        // 查找是否已有对应beacon的行
        var existingRow = $("#userTable tbody tr[data-beacon='" + beacon + "']");
        
        if(existingRow.length > 0){
            // 存在则更新单元格内容
            existingRow.find("td:first").text(beacon);
            // 如果需要更新时间单元格，也可以在这里修改
            // existingRow.find("td:eq(1)").html("<span class='minutes'>00</span>:<span class='seconds'>00</span>");
        } else {
            // 不存在则新增行
            var tr_str = "<tr data-beacon='" + beacon + "'>" +
                "<td align='center'>" + beacon + "</td>" +
                "<td align='center'> <span class='minutes'>00</span>:<span class='seconds'>00</span> </td>" +
                "</tr>";
            $("#userTable tbody").append(tr_str);
        }
    }

    // 移除数据库中已不存在的旧行
    $("#userTable tbody tr").each(function(){
        var rowBeacon = $(this).data("beacon");
        if(!currentBeacons.includes(rowBeacon)){
            $(this).remove();
        }
    });
}

这样就能精准更新每一行，既保证数据同步，又提升了页面性能。

内容的提问来源于stack exchange，提问作者Avalon Parkes-barton