javascript - Jqueryを使用してテーブルのtbodyを削除できません

Question

マークアップ内に次の表があります:-

<table id="tablelist" border="1">

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

そして、ユーザーがリンクをクリックすると起動される次の Java スクリプトを使用して、上記のテーブルを作成しています。

function getprocesslist(result) {
        $('#tablelist tbody').remove();

    var str = 'Total Number Of Processes:- ' + result.total.toString();
        $('#total').text(str.toString());

        var str1 = '<tr><th>' + 'Process Name' + '</th><th>' + 'Process Requestor ID' + '</th><th>' + 'Process State' + ' </th><th>' + 'Process Start Date' + ' </th><th>' + 'Process Due Date' + ' </th></tr>';
        $('#tablelist tr:last').after(str1);
    $.each(result.data, function (key, val) {
        var str2 = '<tr><td>' + val.name + '</td><td>' + val.requesterId + '</td><td>' + val.state + '</td><td>' + val.startedTime + '</td><td>' + val.due + '</td></tr>';

        $('#tablelist tr:last').after(str2);

    });
   }

しかし問題は、ユーザーがリンクを複数回クリックすると、古いデータが削除されるのではなく、新しいデータが古いテーブルの下に表示されることです。私のコードの問題は、最初のクリックで<tbody></tbody>削除され、Jqueryを使用して再度参照できないことだと思いますか? この問題を解決する方法について何か考えはありますか?

ブラジル

Answer 1

tbody を削除してから、すべてをテーブル ヘッドに追加します。代わりに、head と body を空にして、適切な場所にコンテンツを追加します。

function getprocesslist(result) {
    $('#tablelist tbody, #tablelist thead').empty();

    var str = 'Total Number Of Processes:- ' + result.total.toString();
    $('#total').text(str.toString());

    var str1 = '<tr><th>' + 'Process Name' + '</th><th>' + 'Process Requestor ID' + '</th><th>' + 'Process State' + ' </th><th>' + 'Process Start Date' + ' </th><th>' + 'Process Due Date' + ' </th></tr>';
    $('#tablelist thead').append(str1);

    $.each(result.data, function (key, val) {
        var str2 = '<tr><td>' + val.name + '</td><td>' + val.requesterId + '</td><td>' + val.state + '</td><td>' + val.startedTime + '</td><td>' + val.due + '</td></tr>';
        $('#tablelist tbody').append(str2);
    });
}​

Answer 2

tbody を再度追加します。

$('#tablelist').append('<tbody></tbody>');