jQuery中for循环自动执行两次导致表格行数重复的解决办法

核心原因排查 #

首先确认你的POST请求是否被触发了两次：

• 打开浏览器F12开发者工具，切换到Network标签，筛选XHR类型请求，刷新页面后查看是否有两条相同的http://localhost/...请求。如果有，说明$(document).ready回调被重复执行，大概率是页面重复引入了该脚本，或者有其他代码触发了相同请求。

代码修复方案 #

1. 防止重复请求与执行

在回调开始前添加标记，避免重复加载数据：

$(document).ready(function () {
    // 标记是否已加载过数据，避免重复执行
    if ($(this).data('leaveDataLoaded')) return;
    $(this).data('leaveDataLoaded', true);

    $.post('http://localhost/...', function (data) {
        // 后续逻辑
    });
});

2. 优化行生成逻辑，避免冗余代码

用对象映射替代冗长的if-else链，同时一次性拼接所有行再插入表格，提升性能并避免重复添加：

$(document).ready(function () {
    if ($(this).data('leaveDataLoaded')) return;
    $(this).data('leaveDataLoaded', true);

    $.post('http://localhost/...', function (data) {
        var leaveList = data.data;
        var rows = '';
        // 请假类型映射表
        var typeMap = {
            'SL': 'Sick Leave',
            'CL': 'Casual Leave',
            'EL': 'Earned Leave',
            'ML': 'Maternity Leave',
            'VL': 'Visit Leave'
        };

        for (var i = 0; i < leaveList.length; i++) {
            var item = leaveList[i];
            var typeText = typeMap[item.absenceTypeID] || 'Earned Leave (Carry)';
            rows += `<tr>
                        <td>${item.absenceTypeID}</td>
                        <td>${typeText}</td>
                        <td>${item.absLimiteDimension}</td>
                        <td>${item.calculated}</td>
                    </tr>`;
        }

        // 清空表格并插入新行（替换成你的表格ID）
        $('#leaveTable').empty().append(rows);
    });
});

额外注意事项 #

• 检查页面中是否多次引入了该JS脚本，这是导致$(document).ready重复执行的常见原因；
• 每次插入新数据前清空表格，避免旧数据与新数据叠加显示；
• 如果leaveList是对象而非数组，需改用Object.values(leaveList)遍历值，而非索引。

内容的提问来源于stack exchange，提问作者Nurin Azmir