javascript - 显示表格或 html SweetAlert 2.0

Question

我用的是SweetAlert2.0，这个

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

它工作正常，但现在我想在此甜蜜警报中显示表格或 div 或 HTML 元素。

var swal_html='<div class="panel"  style="background:aliceblue;font-weight:bold"><div class="panel-heading panel-info text-center btn-info"> <b>Import Status</b> </div> <div class="panel-body"><div class="text-center"><b><p style="font-weight:bold">Total number of not inserted  rows : add data</p><p style="font-weight:bold">Row numbers:Add data</p></b></div></div></div>';
swal({title:"Good Job!", content: swal_html, icon: "success"});

我试过上面的代码只是为了测试，但它不起作用。

我已经阅读了这个甜蜜警报的文档，上面写着，使用下面提到的代码。

swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});

但我想显示表格 div 等，我应该在哪里编写代码？

Answer 1

我认为你的版本有问题。在此处包含来自 CDN 的最新版本:

<script src="https://unpkg.com/sweetalert2@7.19.3/dist/sweetalert2.all.js"></script>

同时将 HTML 作为 html: 属性而不是 content，如下所示:

var swal_html = '<div class="panel" style="background:aliceblue;font-weight:bold"><div class="panel-heading panel-info text-center btn-info"> <b>Import Status</b> </div> <div class="panel-body"><div class="text-center"><b><p style="font-weight:bold">Total number of not inserted  rows : add data</p><p style="font-weight:bold">Row numbers:Add data</p></b></div></div></div>';
swal({title:"Good Job!", html: swal_html});