如何在 SweetAlert 弹窗中动态生成 HTML 表格（支持任意行数）

本文讲解如何通过 javascript 动态拼接 html 字符串，在 sweetalert 弹窗中渲染由 ajax 返回的可变长度数据表格，无需模板引擎，纯原生 js + 字符串模板实现。

在 Web 开发中，常需将异步获取的数据（如数据库查询结果）以表格形式展示在模态框中。SweetAlert 是轻量且美观的弹窗库，但其 html 选项仅接受字符串，不支持直接嵌入循环逻辑——这意味着你不能在模板字符串中写 for 语句。解决方案是：先在 JS 中生成完整的 行字符串数组，再用 join('') 拼入 HTML 模板。

以下为推荐实现方式（已优化健壮性与可读性）：

$.ajax({
    url: "../model/test.php",
    data: {
        'order-startDate': startDate,
        'order-endDate': endDate,
        'order-custId': custId
    },
    type: 'GET',
    success: function(result) {
        let data;
        try {
            data = JSON.parse(result);
        } catch (e) {
            console.error("JSON 解析失败:", e);
            Swal.fire("错误", "服务器返回数据格式异常", "error");
            return;
        }

        // 安全处理空数据
        if (!Array.isArray(data) || data.length === 0) {
            Swal.fire({
                html: `
${custId}

							

								
								

									Mistral AI
									
Mistral AI被称为“欧洲版的OpenAI”，也是目前欧洲最强的 LLM 大模型平台
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；


                       ${startDate}     ${endDate}

                       
暂无匹配记录
`
            });
            return;
        }

        // 使用 map 构建所有  字符串（自动处理转义风险较低的字段）
        const rows = data.map(row => 
            `
                ${row.item || ''}
                ${row.count || '0'}
            `
        ).join('');

        Swal.fire({
            html: `
                
${custId}
立即学习“前端免费学习笔记（深入）”；
                

                ${startDate}     ${endDate}
                


                
                        ${rows}
                    
            `,
            customClass: {
                popup: 'swal2-popup--table'
            },
            showCloseButton: true,
            focusConfirm: false
        });
    },
    error: function(xhr) {
        Swal.fire("请求失败", `HTTP ${xhr.status}: ${xhr.statusText}`, "error");
    }
});

✅ 关键要点说明：