Javascript 在每次AJAX调用后重新加载HTML表

我连续的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

-循环中，我正在创建行并使用

tableRef.appendChild（行）将它们附加到HTML表中。问题在于，在任何后续的
$.getJSON
调用中，表都会被进一步追加。如何在每次调用时刷新我的表，即从上一次调用中删除数据，并从新调用中填充数据？
您可以使用jQuery使用
$（“#data_table tr”）.remove（）删除
tr
类型的所有子级

所以你会有这样的东西：

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

$.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);
    }
}

您可以使用jQuery删除带有
$（“#data_table tr”）.remove（）的
tr
类型的所有子级

所以你会有这样的东西：

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

$.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);
    }
}

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

$.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（）
您可以在从服务器获取数据后删除行

$.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（）
$（“#data_table tr”）.remove（）
？在追加新数据之前清空表内容（“#data_table”）.empty（）
谢谢大家，这工作了。
$（“#data_table tr”）.remove（）
在追加新数据之前清空表内容。
$（“#data#table'）。empty（）
谢谢大家，这工作了