CODEWITHSUNDEEP
javascriptjqueryhtml
gunes
gunes

Reputation: 131

How to empty javascript without deleting html table

I have a code of 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>

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

What I want to do is I want to empty table before showing new records with $("#bordered-with-stripred-rows").empty(); code. But when I write like this in the javascript code, it also deletes table and shows only id, issue, description etc. not with table. Where should I write empty code?

Upvotes: 0

Views: 90

Answers (1)

Tushar
Tushar

Reputation: 87203

Remove innerHTML of tbody.

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

And append new HTML to tbody

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

Upvotes: 2

Related Questions