使用 Jquery 多次按下按鈕時修復表格中的行

Question

這是主頁面視圖：

當我第一次按下“Pilih Staff”按鈕時，會出現一個模式。 當我檢查它時，它會像這個圖像一樣正常運行：

結果還是符合預期的：

當我第二次按下“Pilih Staff”按鈕時出現問題，依此類推。 當我檢查另一個數據時，它會顯示與我按下按鈕一樣多的重復數據。 像這張圖片：

這是我的 html 代碼：

<tbody id="myTable">
</tbody>

這里是我的 Jquery 代碼：

$('input[type=checkbox]').click(function(){
    $(this).each(function(){
        var nik = $(this).data("nik");
        var nama = $(this).data("nama");
        var rs = $(this).data("rs");
        var unit = $(this).data("unit");
        var jabatan = $(this).data("jabatan");

        if ($(this).is(':checked')) {
            $('#myTable').append('<tr><td>'+nik+'</td><td>'+nama+'</td><td>'+rs+'</td><td>'+unit+'</td><td>'+jabatan+'</td><td><button type="button" class="btn btn-danger btn-sm btnDelete">Delete</button></td></tr>');
        } else {
            $('#myTable').closest('tr').remove();
            // $("#myTable input[type=checkbox]:checked").closest("tr").remove();
        }
    });
});

謝謝..

Answer 1

這是因為您正在附加數據。 用新數據替換舊數據。

$('input[type=checkbox]').click(function(){
        $(this).each(function(){
            var nik = $(this).data("nik");
            var nama = $(this).data("nama");
            var rs = $(this).data("rs");
            var unit = $(this).data("unit");
            var jabatan = $(this).data("jabatan");

            if ($(this).is(':checked')) {
                $('#myTable').html('<tr><td>'+nik+'</td><td>'+nama+'</td><td>'+rs+'</td><td>'+unit+'</td><td>'+jabatan+'</td><td><button type="button" class="btn btn-danger btn-sm btnDelete">Delete</button></td></tr>');
            } else {
                $('#myTable').closest('tr').remove();
                // $("#myTable input[type=checkbox]:checked").closest("tr").remove();
            }
        });
    });