将表格放入 Bootstrap 弹出窗口

Question

我有一个 Bootstrap 弹出窗口，我试图将一个表格放入其中，但是当我单击它时它没有显示。这是第一次尝试在弹出窗口中使用 HTML，所以我不确定如何正确地进行操作。谢谢！

 $(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

  <a role="button" class="btn btn-link btn-item black-text" data-toggle="popover" data-trigger="focus" data-placement="top" title="Currency Converter" data-content="Displayed rates are only for informational purposes and do not reflect on the actual rates you may be charged by the financial institution handling your transaction.
<table class='table table-condensed table-bordered'>
<tr><td>Euro</td><td>€79,123</td></tr>
<tr><td>GB Pound</td><td>£46,536</td></tr>
<tr><td>AU $</td><td>$123,456</td></tr>
</table>LLC accepts payment in US Dollars only. Rates do not include taxes, duties, shipping, insurance, or any other expenses associated with the purchase."><i class="fa fa-exchange"></i> Currency converter</a>

原文由 Rachel S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可能有助于：

HTML:

 <div id="myPopoverContent">
<table border="1" style="width:100%">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

查询：

 $('[data-toggle=popover]').popover({

   content: $('#myPopoverContent').html(),
   html: true

}).click(function() {
   $(this).popover('show');
});

工作 jsFiddle：http: //jsfiddle.net/ja3f6p4j/19/

原文由 Skywalker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这对我有用：

 $(function() {
    $.fn.popover.Constructor.Default.whiteList.table = [];
    $.fn.popover.Constructor.Default.whiteList.tr = [];
    $.fn.popover.Constructor.Default.whiteList.td = [];
    $.fn.popover.Constructor.Default.whiteList.div = [];
    $.fn.popover.Constructor.Default.whiteList.tbody = [];
    $.fn.popover.Constructor.Default.whiteList.thead = [];

    $('[data-toggle="popover"]').popover({
        html: true,
        container: 'body'
    })
})

原文由 qwertz 发布，翻译遵循 CC BY-SA 4.0 许可协议