Javascript Jquery实时加载HTML数据

我递归调用getContent方法，并在HTMLtable中实时绘制值。但是在递归ajax调用之后，新的结果被追加到现有表中，而不是更新表。如何在每次重新填充表之前清除表数据

HTML:

工作流\u作业\u id
域Id
实体Id
类型
地位
任务状态

脚本：

function getContent(){
//ajax call to retrieve the data from DB.
drawTable(dat);
}

function drawTable(data) {

        setTimeout(getContent, 60000);
        for (var i = 0; i < data.resultSet.length; i++) {
            drawRow(data.resultSet[i]);
        }
    }

    function drawRow(rowData) {
        var row = $("<tr />")

        $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
        row.append($("<td>" + rowData.workflow_job_id + "</td>"));
        row.append($("<td>" + rowData.domain_id + "</td>"));
        row.append($("<td>" + rowData.entity_id + "</td>"));
        row.append($("<td>" + rowData.type + "</td>"));
        row.append($("<td>" + rowData.status + "</td>"));
        row.append($("<td>" + rowData.taskstatus + "</td>"));
    }

函数getContent（）{ //从数据库中检索数据的ajax调用。 绘图台（dat）； } 函数绘图表（数据）{ 设置超时（getContent，60000）； 对于（var i=0；i尝试更改

function drawRow(rowData) {
    var row = $("<tr />")

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.workflow_job_id + "</td>"));
    row.append($("<td>" + rowData.domain_id + "</td>"));
    row.append($("<td>" + rowData.entity_id + "</td>"));
    row.append($("<td>" + rowData.type + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.taskstatus + "</td>"));
}

函数绘图行（rowData）{
变量行=$（“”）
$（“#personDataTable”）.append（row）；//这将把tr元素附加到表中……保留它的引用一段时间，因为我们将向其中添加cels
行.append（$（“”+rowData.workflow_job_id+“”））；
附加（$（“”+rowData.domain_id+“”））；
行。追加（$（“”+rowData.entity_id+“”））；
行。追加（$（“”+rowData.type+“”））；
行。追加（$（“”+rowData.status+“”））；
行。追加（$（“”+rowData.taskstatus+“”））；
}

到

函数绘图行（rowData）{
变量行=$（“”）
$（“#personDataTable”）.find（'tr'）.remove（）；
$（“#personDataTable”）.append（row）；//这将把tr元素附加到表中……保留它的引用一段时间，因为我们将向其中添加cels
行.append（$（“”+rowData.workflow_job_id+“”））；
附加（$（“”+rowData.domain_id+“”））；
行。追加（$（“”+rowData.entity_id+“”））；
行。追加（$（“”+rowData.type+“”））；
行。追加（$（“”+rowData.status+“”））；
行。追加（$（“”+rowData.taskstatus+“”））；
}

---

要在追加之前删除旧行，为什么不在追加之前删除行，如下所示：

function getContent(){
//ajax call to retrieve the data from DB.
drawTable(dat);
}

function drawTable(data) {

    setTimeout(getContent, 60000);
    $("#personDataTable").find("tr:gt(0)").remove();
    for (var i = 0; i < data.resultSet.length; i++) {
        drawRow(data.resultSet[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.workflow_job_id + "</td>"));
    row.append($("<td>" + rowData.domain_id + "</td>"));
    row.append($("<td>" + rowData.entity_id + "</td>"));
    row.append($("<td>" + rowData.type + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.taskstatus + "</td>"));
}

函数getContent（）{ //从数据库中检索数据的ajax调用。 绘图台（dat）； } 函数绘图表（数据）{ 设置超时（getContent，60000）； $（“#personDataTable”）.find（“tr:gt（0）”.remove（）； 对于（var i=0；i当您使用.append（）方法时，为什么会对内容被追加感到惊讶？停止向表中追加行？是的，我知道append（）方法，但正在寻找替代方法。在将行附加到现有表之前，类似于$（“#personDataTable”）.empty（）的内容。因此。。。是否使用

空

？您在

中也有您的标题，这似乎不太正确。我对此感到厌倦，但它不起作用。它将删除除data.Nope中最后一个之外的所有“tr”。还是一样。@user3746601对我来说很好。请参阅“数据数组中只有一个条目”。但我有多个条目。如果您有多行数据，它将无法工作。@user3746601我已经更新了上面的代码。希望这能奏效。在添加之前删除除标题以外的行：

$（“#personDataTable”）.find（“tr:gt（0）”.Remove（）function drawRow(rowData) {
    var row = $("<tr />")

    $("#personDataTable").find('tr').remove();
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.workflow_job_id + "</td>"));
    row.append($("<td>" + rowData.domain_id + "</td>"));
    row.append($("<td>" + rowData.entity_id + "</td>"));
    row.append($("<td>" + rowData.type + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.taskstatus + "</td>"));
}

function getContent(){
//ajax call to retrieve the data from DB.
drawTable(dat);
}

function drawTable(data) {

    setTimeout(getContent, 60000);
    $("#personDataTable").find("tr:gt(0)").remove();
    for (var i = 0; i < data.resultSet.length; i++) {
        drawRow(data.resultSet[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")

    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.workflow_job_id + "</td>"));
    row.append($("<td>" + rowData.domain_id + "</td>"));
    row.append($("<td>" + rowData.entity_id + "</td>"));
    row.append($("<td>" + rowData.type + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.taskstatus + "</td>"));
}