如何基于多层级JSON数据使用jQuery生成HTML表格？

我正在用jQuery配合HTML开发，需要基于JSON数据生成HTML表格。如果是无层级的JSON实现起来很简单，但我需要一个能适配任意层级JSON对象的灵活方案。见过一些用列表的实现，但我的场景只需要处理对象类型。以下是示例：

示例JSON数据 #

{
    "A": {
        "B": {
            "B1": "B1-a",
            "B2": "B2-a"
        },
        "C": {
            "Ca": "Cb"
        }
    },
    "D": {
        "E": {
            "E1": "E1-a",
            "E2": "E2-a"
        },
        "F": {
            "Fa": "Fb"
        }
    }
}

目标生成的HTML表格 #

<table>
    <tbody id="JSONTable">
        <tr>
            <td rowspan="5">A</td>
        </tr>
        <tr>
            <td rowspan="3">B</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B1-a</td>
        </tr>
        <tr>
            <td>B2</td>
            <td>B2-a</td>
        </tr>
        <tr>
            <td>C</td>
            <td>Ca</td>
            <td>Cb</td>
        </tr>
        <tr>
            <td rowspan="5">D</td>
        </tr>
        <tr>
            <td rowspan="3">E</td>
        </tr>
        <tr>
            <td>E1</td>
            <td>E1-a</td>
        </tr>
        <tr>
            <td>E2</td>
            <td>E2-a</td>
        </tr>
        <tr>
            <td>F</td>
            <td>Fa</td>
            <td>Fb</td>
        </tr>
    </tbody>
</table>

实现思路与代码 #

核心思路是递归遍历JSON对象，先计算每个节点需要占据的行数（rowspan），再根据层级生成对应的表格行：

• 递归计算每个节点的子节点总行数，确定当前节点的rowspan值。
• 按层级生成表格行：父节点单独占一行（仅包含当前节点的td，带rowspan），子节点依次生成对应行。
• 处理叶子节点（值为非对象类型）时，直接生成包含键和值的行。

以下是完整的jQuery实现代码：

// 计算节点的总行数（包括子节点）
function calculateRowCount(obj) {
    let count = 0;
    for (const key in obj) {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            const childCount = calculateRowCount(obj[key]);
            count += childCount + 1; // 子节点总行数 + 当前节点的占位行
        } else {
            count += 1; // 叶子节点占一行
        }
    }
    return count;
}

// 递归生成表格内容
function generateTableRows(obj, $container, depth = 0) {
    for (const key in obj) {
        const value = obj[key];
        const rowCount = typeof value === 'object' && value !== null ? calculateRowCount(value) + 1 : 1;
        
        // 生成当前节点的占位行（仅显示当前键，带rowspan）
        const $placeholderRow = $('<tr></tr>');
        $placeholderRow.append($('<td></td>').attr('rowspan', rowCount).text(key));
        // 前面补上空td，对应层级缩进
        for (let i = 0; i < depth; i++) {
            $placeholderRow.prepend($('<td></td>'));
        }
        $container.append($placeholderRow);
        
        // 递归处理子节点
        if (typeof value === 'object' && value !== null) {
            generateTableRows(value, $container, depth + 1);
        } else {
            // 叶子节点生成包含键和值的行
            const $leafRow = $('<tr></tr>');
            // 前面补上空td，对应层级缩进
            for (let i = 0; i < depth + 1; i++) {
                $leafRow.append($('<td></td>'));
            }
            $leafRow.append($('<td></td>').text(value));
            $container.append($leafRow);
        }
    }
}

// 初始化调用
$(document).ready(function() {
    const jsonData = {
        "A": {
            "B": {
                "B1": "B1-a",
                "B2": "B2-a"
            },
            "C": {
                "Ca": "Cb"
            }
        },
        "D": {
            "E": {
                "E1": "E1-a",
                "E2": "E2-a"
            },
            "F": {
                "Fa": "Fb"
            }
        }
    };
    
    const $tableBody = $('#JSONTable');
    $tableBody.empty();
    generateTableRows(jsonData, $tableBody);
});

代码说明 #

• calculateRowCount：递归计算当前节点及其所有子节点需要占据的总行数，用于设置父节点的rowspan属性。
• generateTableRows：递归遍历JSON对象，生成对应的表格行。父节点生成带rowspan的占位行，子节点根据层级补上空td实现缩进，叶子节点直接生成键值行。
• 层级缩进通过在每行前添加空td实现，确保表格结构对齐。

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