javascript - display table or html SweetAlert 2.0 - Stack Overflow

admin管理员组

文章数量:1387411

I am using SweetAlert2.0, This One

<script src=".min.js"></script>

it is working fine, but now I want to display table or div or HTML element in this sweet alert.

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

I have tried the above code just for testing, but it's not working.

I have read the documentation of this sweet alert that says, use code mentioned below.

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

but I want to display table div etc.where should I write my code?

I am using SweetAlert2.0, This One

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

it is working fine, but now I want to display table or div or HTML element in this sweet alert.

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

I have tried the above code just for testing, but it's not working.

I have read the documentation of this sweet alert that says, use code mentioned below.

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

but I want to display table div etc.where should I write my code?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 10, 2018 at 11:48 sayyed tabrezsayyed tabrez 12611 gold badge11 silver badge1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I think problem on your version. Include the latest version from CDN here:

<script src="https://unpkg./[email protected]/dist/sweetalert2.all.js"></script>

Also put HTML as a html: property not content, like following:

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

try this

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>`
})

本文标签： javascriptdisplay table or html SweetAlert 20Stack Overflow