表格批量删除功能：Checkbox第三次勾选时模态框出现重复数据问题

问题描述 #

实现了带Checkbox的表格批量删除功能：勾选行后点击删除按钮弹出确认模态框，关闭模态框无操作。当前异常：首次勾选模态框显示正确，取消勾选正常，但执行「勾选→取消→再次勾选」流程时，模态框会加载之前取消勾选过的旧数据。

核心原因 #

• 原代码通过newTableData +=字符串拼接维护模态框内容，但取消勾选时仅删除DOM元素，未从newTableData中移除对应内容
• 再次勾选时，旧内容仍保留在字符串中，新内容被追加，导致模态框出现重复/旧数据
• 取消勾选逻辑存在冗余操作（如元素移除后仍执行empty()、添加d-none类）

修复方案 #

优化思路 #

放弃字符串拼接维护模态框内容，改为每次勾选/取消时重新收集所有已勾选行，动态生成模态框内容，从根源避免数据不一致问题。

修改后的完整代码 #

let counter = 0;
$('.btn-delete-employees-table-danger').hide();

// 监听复选框点击事件
$(document).on('click', '.btndelete', function(e) {
    const $row = $(this).closest('tr');
    const isChecked = $(this).prop("checked");

    // 更新行选中状态样式
    if (isChecked) {
        $row.addClass('deleteselectedrow');
        counter++;
    } else {
        $row.removeClass('deleteselectedrow');
        counter--;
    }

    // 控制删除按钮显示/隐藏
    $('.btn-delete-employees-table-danger').toggle(counter > 0);
    // 更新选中计数文本
    $('.counter-of-selected-emp-modal').html(`${counter} employees will be deleted`);

    // 重新渲染模态框内容
    renderModalContent();

    // 选中数为0时清空模态框
    if (counter === 0) {
        $('.data-in-modal').html("");
    }
});

// 动态生成模态框内容的函数
function renderModalContent() {
    let modalHtml = '';
    // 遍历所有选中的行，拼接HTML
    $('.deleteselectedrow').each(function() {
        const $row = $(this);
        const rowId = $row.attr('id');
        modalHtml += `
            <div class="card mt-3" id="emp-${rowId}">
             <div class="d-flex justify-content-between modal-row">
                <div>
                    <h4>${$row[0].cells[1].innerText}</h4>
                    <p class="light-small-grey-text">ID</p>
                </div>
                <div>
                    <h4>${$row[0].cells[2].innerText}</h4>
                    <p class="light-small-grey-text">Emp Name</p>
                </div>
                <div>
                <h4>${$row[0].cells[3].innerText}</h4>
                <p class="light-small-grey-text">Emp DOB</p>
                </div>
                <div>
                <h4>${$row[0].cells[4].innerText}</h4>
                <p class="light-small-grey-text">Emp CNIC</p>
                </div>
            </div>
            </div>
        `;
    });
    // 更新模态框内容
    $('.data-in-modal').html(modalHtml);
}

// 原有日期设置函数保留
function getandsetdate() {
    var date = new Date().toISOString('yyyy-mm-dd').split('T')[0];
    var element = document.getElementById('date')
    element.value = date
    return date
}          

// 显示确认模态框
$('.shown-modal').on('click', function (e) {
    var policy_date_elem = $('input[name="emp_policy_end"]')
    policy_date_elem.val(getandsetdate())
    policy_date_elem.css('border', '1px #ced4da solid')
    $('#showsDependentModal').modal('show');
})  

// 确认删除操作
$('#btnDelteYes').click(function () {
    $('.deleteselectedrow').remove();
    $('.btn-delete-employees-table-danger').hide();
    counter = 0;
    $('.counter-of-selected-emp-modal').html('');
    $('.data-in-modal').html("");
    $('#showsDependentModal').modal('hide');
});

// 取消删除操作
$('.no-btn').click(function () {
    $('tr').removeClass('deleteselectedrow')
    counter = 0;
    $('.btn-delete-employees-table-danger').hide();
    $('.counter-of-selected-emp-modal').html('');
    $('.data-in-modal').html("");
    $('#showsDependentModal').modal('hide');
})

关键修改点 #

1. 移除newTableData变量，新增renderModalContent函数动态生成模态框内容
2. 勾选/取消时仅维护行的选中样式和计数器，通过调用renderModalContent同步更新模态框
3. 清理取消勾选逻辑中的冗余DOM操作
4. 在确认删除和取消模态框时，重置计数器与模态框内容，避免残留状态

内容的提问来源于stack exchange，提问作者HASEEB ALAM RAFIQ