javascript - 每次 AJAX 调用后重新加载 HTML 表

Question

我的顺序 AJAX 调用不断将行附加到我的 HTML 表中，这是我不希望看到的。我希望我的表在每次调用时都用新数据刷新/重新加载，而不是附加。

我的代码:

var data = $('#data_input').val();
var tableRef = document.getElementById('data_table');

$.getJSON("/data/"+data, function(dataState)
{
    // ...
    for(var dataId in dataState)
    {
        var row = document.createElement("tr");
        // creating new cells in a row with the data
        tableRef.appendChild(row);
    }
}

因此，我使用 var tableRef = document.getElementById('data_table'); 获取对 HTML 表的引用，在 for 循环中，我' m 创建行并使用 tableRef.appendChild(row); 将它们附加到 HTML 表中。问题是，在任何后续的 $.getJSON 调用中，该表都会被进一步附加。我如何在每次通话时刷新我的 table ，即。删除之前调用的数据，并从新调用填充数据？

Answer 1

从服务器获取数据后可以删除行

$.getJSON("/data/"+data, function(dataState) {

   $("#data_table tr").remove();
       //...

        for(var dataId in dataState) {


                var row = document.createElement("tr");

               // creating new cells in a row with the data

                tableRef.appendChild(row);
            }

        }

    });

请注意，它还会删除表的标题，如果您只想删除数据并保留标题，则只需删除 tbody 标记内的行，即 $("#data_table tbody tr").remove();