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');循环中使用for获取对我的HTML表的引用，我正在创建行并使用tableRef.appendChild(row);将它们附加到HTML表中。问题是在任何后续$.getJSON调用中，表格会被进一步追加。如何在每次通话时刷新我的表，即。从上一次通话中删除数据，并从新通话中填写数据？

Answer 1

您可以使用jQuery删除<input #subjectName type="text" /> <ul> <li *ngFor="let subject of subjectsNames"> <span> {{subject}} <input id="subjectGrade" type="number"/> <input id="subjectWeight" type="number"/> </span> </li> </ul>类型tr的所有子项。

所以你会有这样的事情：

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

Answer 2

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

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

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

2 个答案: