Question

我成功地使用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);
  }

Answer 1

请改为尝试：

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完成之前清空表（我移动了线）

Answer 2

您的代码无效的原因是，您要移除所有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);
}

jQuery自动更新表

2 个答案: