Question

我以递归方式调用getContent方法并在HTMLtable中实时绘制值。但是在递归ajax调用之后，新结果将被附加到现有表而不是更新表。在我填充表格之前，我每次都清除表格数据？

HTML：

        <table id="personDataTable" class="table table-bordered">
        <tbody>
            <tr>
                <th>workflow_job_id</th>
                <th>Domain Id</th>
                <th>Entity Id</th>
                <th>Type</th>
                <th>Status</th>
                <th>Task Status</th>

            </tr>
        </tbody>
        </table>

脚本：

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>"));
    }

Answer 1

尝试更改

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>"));
}

到

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>"));
}

在追加

之前删除旧行

Answer 2

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

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>"));
}

Jquery实时加载HTML数据

2 个答案: