Question

我必须在表格中添加一个json文件。

<table id="userdata" border="2">
    <thead>
    <th>Id</th>
    <th>Title</th>
    <th>TotalUnresolvedItems</th>
    </thead>
    <tbody></tbody>
</table>
<strong>Item2:</strong>
<table id="userdata2" border="2">
    <thead>
    <th>Id</th>
    <th>FullName</th>
    <th>TotalUnresolvedItems</th>
    </thead>
    <tbody></tbody>
</table>

每次setInterval触发它都会添加新行，但我想删除已存在的行并将其替换为新行。我从不同的地方尝试过.remove（）但它永远删除:( 我的代码看起来像这样。

<script type="text/javascript">   
    $(document).ready(function () {
        refreshStatus();
        setInterval(refreshStatus, 30000);   
    });
    function refreshStatus() {
        $.ajax({
            type: "GET",
            url: "refreshTicketStatus",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(),
            dataType: "json",
            success: function (data) {
                repopulateTable(data);
            },
            error: function (errorThrown){
                alert(errorThrown);
            }
        })
    }
    function repopulateTable(data) {
        var parsedData = JSON.parse(data);
        console.log(parsedData);
        var dashboard = [];
        dashboard.push(JSON.parse(data));
        dashboard.forEach(function (value, index) {;
            for (var key in value) {
                if (value.hasOwnProperty(key)) {
                    if (key === 'Item1') {
                        value[key].forEach(function (val) {
                            //$('#userdata tbody').remove(9000);
                            var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                            $(tblRow).appendTo("#userdata tbody");
                        })
                    }
                    if (key === 'Item2') {
                        value[key].forEach(function (val) {
                            //$('#userdata2 tbody').remove(9000);
                            var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                            $(tblRow).appendTo("#userdata2 tbody");
                        })
                    }
                }
            }
        });
    }
  </script>

Answer 1

我会将你的repopulateDataTable函数更改为以下内容。基本上我创建了两个空变量，将所有行html传递给它们，然后每个间隔只替换一次所有html。

function repopulateTable(data) {
    var parsedData = JSON.parse(data);
    console.log(parsedData);
    var dashboard = [];
    dashboard.push(JSON.parse(data));
    dashboard.forEach(function (value, index) {;
        var table1Rows  = "";
        var table2Rows  = "";
        for (var key in value) {
            if (value.hasOwnProperty(key)) {
                if (key === 'Item1') {
                    value[key].forEach(function (val) {
                        //$('#userdata tbody').remove(9000);
                        var tbl1Row = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                        table1Rows   += tbl1Row;
                    })
                }
                if (key === 'Item2') {
                    value[key].forEach(function (val) {
                        //$('#userdata2 tbody').remove(9000);
                        var tbl2Row = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" + "<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                        table2Rows   += tbl2Row;
                    })
                }
            }
        }
        $("#userdata tbody").html(table1Rows);
        $("#userdata2 tbody").html(table2Rows);
    });
}

阻止每个页面刷新的新行插入

1 个答案: