如何使用JavaScript从多维数组创建并填充多张表格

我明白你的问题啦——之前你处理的是无键的普通数组，现在拿到的是一个以员工姓名为键、对应打卡记录数组的对象，确实需要调整遍历逻辑，不需要复杂的嵌套循环，用Object.entries()就能轻松搞定，下面是具体的修改方案：

修改后的核心代码（替换原success函数内的表格生成部分） #

success:function(data){
    console.log(data)
    // 初始化总HTML，用来拼接所有表格
    var totalHtml = '';

    // 遍历对象的键值对：key是员工姓名，value是该员工的打卡记录数组
    Object.entries(data).forEach(([employeeName, records]) => {
        // 为每个员工生成一张独立表格
        var tableHtml = `
        <div class="employee-table-container">
            <h4>${employeeName}</h4>
            <table class="table table-striped table-condensed table-responsive">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Time In</th>
                        <th>Time Out</th>
                        <th>Total Time</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
        `;

        // 遍历当前员工的每条打卡记录
        records.forEach(record => {
            tableHtml += `
            <tr>
                <td class="table_data" data-row_id="${record.id}" data-column_name="id" >${record.first_name} ${record.last_name}</td>
                <td><input type="text" class="dateedit" data-row_id="${record.id}" data-column_name="clock_in" value="${record.clock_in}"></td>
                <td><input type="text" class="dateedit" data-row_id="${record.id}" data-column_name="clock_out" value="${record.clock_out}"></td>
                <td class="table_data" data-row_id="${record.id}" data-column_name="time">${record.time}</td>
                <td><button type="button" name="delete_btn" id="${record.id}" class="btn btn-xs btn-danger btn_delete"><span class="glyphicon glyphicon-trash"></span></button></td>
            </tr>
            `;
        });

        // 闭合当前表格的标签
        tableHtml += `
                </tbody>
            </table>
        </div>
        `;

        // 将当前员工的表格追加到总HTML中
        totalHtml += tableHtml;
    });

    // 将所有表格插入到页面容器
    $('#tables').html(totalHtml);

    // 初始化datetimepicker（和你原来的逻辑一致）
    $('.dateedit').each(function(){
        $(this).datetimepicker({
            format: "YYYY-MM-DD H:mm:ss",
            sideBySide: true
        });
    });
}

关键逻辑说明 #

• Object.entries(data)：这个方法会把你的对象转换成键值对数组，比如[["John Snow", [...]], ["Frank Thomas", [...]]]，这样我们就能同时拿到员工姓名和对应的打卡记录。
• 每张表格独立生成：对每个员工单独创建表格，还可以加上员工姓名的标题，让页面结构更清晰。
• 保留原有功能：你之前的编辑框、删除按钮、datetimepicker初始化逻辑完全保留，只是调整了遍历数据的方式。

替代遍历方式（如果你习惯用for循环） #

如果你不想用forEach，也可以用for...in循环来遍历对象：

for (const employeeName in data) {
    if (data.hasOwnProperty(employeeName)) {
        const records = data[employeeName];
        // 后续生成表格的逻辑和上面一致
    }
}

这样修改后，就能根据每个员工的打卡记录生成独立的表格啦，完全适配你现在的多维对象结构～

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