如何在不删除html表的情况下清空javascript

How to empty javascript without deleting html table

本文关键字:情况下 清空 javascript html 删除      更新时间:2023-09-26

我有一个html:的代码

<form action="javascript:getAllRecords();" method="GET">
    <input type="submit" value="Show All" />
</form>
<table id="bordered-with-stripred-rows" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>Id</th>
            <th>Issue</th>
            <th>Description</th>
            <th>Input Date</th>
            <th>Edit Date</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

和javascript:

function getAllRecords() {
    $.getJSON("getjson.php",
        function(response) {
            $("#bordered-with-stripred-rows").empty();
            var trHTML = '';
            $.each(response, function(key, value) {
                trHTML +=
                    '<tr><td>' + value.id +
                    '</td><td>' + value.issue +
                    '</td><td>' + value.description +
                    '</td><td>' + value.input_date +
                    '</td><td>' + value.edit_date +
                    '</td><td>' + value.name +
                    '</td><td>' + value.email +
                    '</td></tr>';
            });
            $('#bordered-with-stripred-rows').append(trHTML);
        });
}

我想做的是在用$("#bordered-with-stripred-rows").empty();代码显示新记录之前清空表。但当我在javascript代码中这样写时,它也会删除表,只显示id、issue、description等,而不显示表。我应该在哪里写空代码?

删除tbodyinnerHTML

$('#bordered-with-stripred-rows tbody').empty(); // OR html('');

append新HTML到tbody

$('#bordered-with-stripred-rows tbody').append(trHTML);