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

如何在 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

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"); } });

关键要点说明:

  • 避免内联循环: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 展示”的典型流程,无需引入额外依赖,适合快速集成与维护。

https://www.php.cn/faq/1995708.html

发表回复

Your email address will not be published. Required fields are marked *