Question

我正在使用bootbox作为我网站的弹出模式。当调用下面的函数时，我想显示一个包含一些信息的小表。

function infoModal(){
    var table = "<div>" + "<table class='formattedTable'>" + "<thead>" + "<tr>Legend</tr>" + "</thead>" + "<tbody>" + "<tr class='catString'>This color is the first color.</tr>" + "<tr class='warn'>This color is the second color.</tr>" + "<tr class='caution'>This color is the third color.</tr>" + "<tr class='danger'>This color is the fourth color.</tr>" + "</tbody>" + "</table>" +"</div>";
    bootbox.confirm({
        message: table,
        buttons: {
                confirm: {
                    label: 'OK'
                }
        },
        callback: function (result) {
            if (result) {
                console.log("Thanks for using this modal!");
            }
        }
    });

}

但是，当我在HTML中测试时，它的格式如下：

<div class="bootbox-body">
 <div>LegendThis color is the first color.This color is the second color.This color is the third color.This color is the fourth color.

    <table class="formattedTable">
        <thead><tr></tr></thead>
        <tbody>
            <tr class="catString"></tr>
            <tr class="warn"></tr>
            <tr class="caution"></tr>
            <tr class="danger"></tr>
        </tbody>
    </table>
    </div>
    </div>

我知道我没有在上面的bootbox-body变量中放置div（减去table div），所以这里发生了什么？

Answer 1

刚想通了 - 我忘记了进入每行的<td>标签！这就是函数应该是这样的：

function infoModal(){
    var table = "<div>" + "<table class='formattedTable'>" + "<thead>" + "<tr><td>Legend</td></tr>" + "</thead>" + "<tbody>" + "<tr class='catString'><td>This color is the first color.</td></tr>" + "<tr class='warn'><td>This color is the second color.</td></tr>" + "<tr class='caution'><td>This color is the third color.</td></tr>" + "<tr class='danger'><td>This color is the fourth color./<td></tr>" + "</tbody>" + "</table>" +"</div>";
    bootbox.confirm({
        message: table,
        buttons: {
                confirm: {
                    label: 'OK'
                }
        },
        callback: function (result) {
            if (result) {
                console.log("Thanks for using this modal!");
            }
        }
    });

}

Bootbox模式不能正确格式化HTML

1 个答案: