本文讲解如何通过 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: `<p></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="javascript-typescript-typescript-scaffold" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="overflowclass">javascript-typescript-typescript-scaffold</a>
													<p class="overflowclass">你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><h5>${custId}</h5><br>
                       ${startDate}     ${endDate}<br><p class="text-muted">暂无匹配记录</p>`
            });
            return;
        }

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

        Swal.fire({
            html: `
                <p></p><h5>${custId}</h5>
                <br>
                ${startDate}     ${endDate}
                <br><br>

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

✅ 关键要点说明：

• ✅ 避免内联循环：Swal.fire({ html:...${for(...) {...}}...}) 语法非法；必须提前生成字符串。
• ✅ 优先使用 map() + join()：比传统 for 循环更函数式、简洁且不易出错。
• ✅ 防御性编程：检查 JSON.parse 异常、空数组、缺失字段（用 || '' 提供默认值）。
• ✅ HTML 安全提示：若 item 或 count 可能含用户输入内容（如富文本），应使用 textContent 方式或 DOM API 构建（如 document.createElement）防止 XSS；当前示例适用于可信内部数据。
• ✅ 样式兼容性：确保 .table-datatable 等 CSS 类已在页面中定义（如 DataTables 或自定义样式）。

该方案简洁高效，完全满足“AJAX → JSON → 动态表格 → SweetAlert 展示”的典型流程，无需引入额外依赖，适合快速集成与维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！