显示表格或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

尝试这个

swal({
  html: `<table id="table" border=1>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Salary</th>
                <th>Country</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Dakota Rice</td>
                <td>$36,738</td>
                <td>Niger</td>
                <td>Oud-Turnhout</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Minerva Hooper</td>
                <td>$23,789</td>
                <td>Curaçao</td>
                <td>Sinaai-Waas</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Sage Rodriguez</td>
                <td>$56,142</td>
                <td>Netherlands</td>
                <td>Baileux</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Philip Chaney</td>
                <td>$38,735</td>
                <td>Korea, South</td>
                <td>Overland Park</td>
            </tr>
</tbody>
</table>`
})

Answer 2

我认为您的版本存在问题。 在此处包括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});