jQuery 動態生成表格：從 JSON 數組渲染 HTML Table 完整示例

需求

給定一個對象數組 people = [{name, email, phone}, ...]，使用 jQuery 動態創建包含表頭 (<thead>) 和表體 (<tbody>) 的 HTML 表格，並追加到 <body>，帶基本邊框樣式。

完整代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 動態生成表格</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <style>
        table { border-collapse: collapse; width: 100%; max-width: 600px; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f4f4f4; }
    </style>
</head>
<body>
    <!-- 表格將動態插入此處 -->

<script>
$(function() {
    // 1. 模擬數據源
    var people = [
        {"name": "張三", "email": "zhangsan@example.com", "phone": "13800138000"},
        {"name": "李四", "email": "lisi@example.com", "phone": "13900139000"},
        {"name": "王五", "email": "wangwu@example.com", "phone": "13700137000"}
    ];

    // 2. 創建表格骨架
    var $table = $('');
    var $thead = $('').appendTo($table);
    var $tbody = $('').appendTo($table);

    // 3. 構建表頭
    $thead.append('姓名郵箱電話');

    // 4. 遍歷數據填充表體
    $.each(people, function(index, item) {
        var row = '' +
                  '' + item.name + '' +
                  '' + item.email + '' +
                  '' + item.phone + '' +
                  '';
        $tbody.append(row);
    });

    // 5. 插入頁面
    $('body').append($table);
});
</script>
</body>
</html>

關鍵點解析

1. 使用 jQuery 對象包裝：$('') 創建元素並返回 jQuery 對象，支持鏈式調用 .append()、.appendTo()。
2. 分離 thead/tbody：語義化結構，便於後續插件（如 DataTables、排序、固定表頭）擴展。
3. $.each 遍歷：比原生 forEach 兼容性更好，參數順序為 (index, item)。
4. 字符串拼接 vs DOM 操作：小數據量拼接字符串性能足夠；大數據量建議使用 DocumentFragment 或虛擬滾動。
5. XSS 防護：若數據來自用戶輸入，務必轉義：$.text(item.name) 或手動 escapeHtml。

進階：使用模板引擎 (推薦複雜場景)

<script type="text/template" id="rowTpl">
    <tr>
        <td>{{name}}</td>
        <td>{{email}}</td>
        <td>{{phone}}</td>
    </tr>
</script>

// 使用簡單替換或引入 doT.js / Handlebars
var tpl = $('#rowTpl').html();
var rows = people.map(p => tpl.replace('{{name}}', p.name).replace('{{email}}', p.email).replace('{{phone}}', p.phone)).join('');
$tbody.html(rows);

常見錯誤避坑

• append('<tr>...</tr>') 直接到 $table 會導致瀏覽器自動補全 <tbody>，結構混亂。始終顯式創建 $thead/$tbody。
• 忘記 border-collapse: collapse 導致雙重邊框。
• 在循環中重複 $('body').append() 觸發多次重排，應組裝完成後一次性插入。