jQuery自动更新表格答案

【问题标题】：Automatic update table by jQueryjQuery自动更新表格
【发布时间】：2017-07-27 05:35:20
【问题描述】：

我成功地使用 JSON 数据动态填充表。现在的问题是如何每隔一定时间用新数据更新表。在使用新数据创建新表之前，我尝试取消该表，但它似乎不起作用。当我尝试下面的代码时，该表未填充。你能帮帮我吗？

function loadTable(){
    $('#mytable tbody tr').remove();
    $.getJSON( 'sort.php', function( data ) {
        $.each( data, function( i, val ) { 
            $('#mytable tr').eq(i).after('<tr><td>'+val.value0+'</td><td>'+ 
               val.n_users+ '</td><td>'+val.value1+'/'+val.value2+ 
               '</td><td>10:59 08/01/2014</td></tr>');
        });
    });
    setTimeout("loadTable()",15000);
  }

【问题讨论】：

标签： jquery json html-table

【解决方案1】：

您的代码不起作用的原因是您要删除所有tr 元素，然后尝试添加基于tr 元素的代码：

$('#mytable tbody tr').remove();

和：

$('#mytable tr').eq(i).after(...);

此时，没有tr，所以这条线什么也不做。相反，只需附加 tr，而不是尝试修改现有的：

function loadTable() {
    $.getJSON('sort.php', function (data) {
        $('#mytable tbody tr').remove();
        $.each(data, function (i, val) {
            $('#mytable').append('<tr><td>' + val.value0 + '</td><td>' + val.n_users + '</td><td>' + val.value1 + '/' + val.value2 + '</td><td>10:59 08/01/2014</td></tr>');
        });
    });
    setTimeout("loadTable()", 15000);
}

如果行数始终相同，您可以修改现有行，但需要确保不要删除它们：

function loadTable() {
    $.getJSON('sort.php', function (data) {
        $.each(data, function (i, val) {
            $('#mytable tr').eq(i).html('<td>' + val.value0 + '</td><td>' + val.n_users + '</td><td>' + val.value1 + '/' + val.value2 + '</td><td>10:59 08/01/2014</td>');
        });
    });
    setTimeout("loadTable()", 15000);
}

【讨论】：

谢谢。当您发现一个有用的答案时，您可以使用左侧的箭头对答案进行投票。如果您选择一个答案作为正确答案，请单击左侧数字旁边的复选标记。

【解决方案2】：

试试这个：

function loadTable() {

    $.getJSON('sort.php', function (data) {
        $('#mytable tbody tr').remove();
        $.each(data, function (i, val) {
            $('#mytable tbody').append('<tr><td>' + val.value0 + '</td><td>' + val.n_users + '</td><td>' + val.value1 + '/' + val.value2 + '</td><td>10:59 08/01/2014</td></tr>');
        });
    });
    setTimeout("loadTable()", 15000);
}

最好在ajax完成之前不要清空表格（我移动了行）

【讨论】：

这看起来应该可以解决 OP 的问题，但是如果你能说明它解决问题的原因会很好。
是的。 "after" 返回一个字符串，但不会更改 HTML。 “追加”将更改 HTML。