将表格放入 Bootstrap 弹出窗口答案

【问题标题】：Putting table into Bootstrap popover将表格放入 Bootstrap 弹出窗口
【发布时间】：2015-09-29 08:00:21
【问题描述】：

我有一个 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>

【问题讨论】：

我不确定这是否是主要原因，但您的按钮上缺少引号 - " - 。在它说处理您的交易的最后。
我觉得您正在尝试将 HTML 标签嵌入到 HTML 标签中，这至少看起来是非常糟糕的做法。
@user2190986 此处没有引号，因为内容仍在继续。
@Jason 如何使用 HTML 制作这样的弹出框？我需要那张桌子。模态框占据整个屏幕。
@RachelS 请看答案。

标签： javascript twitter-bootstrap popover

【解决方案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>

jQuery:

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

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

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

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

【讨论】：

是的，我最终使用了类似的东西并且它有效。
如果要创建动态表，您会如何处理？

【解决方案2】：

示例：http://jsfiddle.net/z824fn6b/320/ 在弹出框和切换按钮中使用表格

<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>
<div id="a1" class="hidden">
  <div class="popover-heading">Title <span style="float:right;cursor:pointer;" class="fa fa-times" data-toggle="popover"></span></div>
  <div class="popover-body">
    <table 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>
  </div>
</div>


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

【讨论】：

【解决方案3】：

这对我有用：

$(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'
    })
})

【讨论】：

工作解决方案...你能解释一下 $.fn.popover.Constructor.Default.whiteList.xxxxxx 是什么意思吗？
使用 Bootstrap 5 的人应该替换 $.fn.popover.Constructor.Default.whiteList。 [...] 使用 bootstrap.Tooltip.Default.allowList。 [...] 每个允许的 HTML 标记。

【解决方案4】：

我是这样做的：

HTML：

<div class="span12" style="margin-top: 150px;width:100%">
   <a tabindex="0" role="button" data-trigger="focus" class="btn-sm btn-info" data-placement="top" id="commentPopover"><i class="fa fa-comments" ></i> View</a>
   <!-- Popover 2 hidden content -->
   <div id="commentPopoverHiddenContent" style="display: none">
      <div>
         <table border="1" style="width:100%">
            <tr>
               <th width="30%">Comment date</th>
               <th width="70%">Comment</th>
            </tr>
            <tr>
               <td>12/03/2015 16:45</td>
               <td>*Username - Testing1</td>
            </tr>
            <tr>
               <td>12/03/2015 16:55</td>
               <td>*Username - Testing2</td>
            </tr>
            <tr>
               <td>12/03/2015 17:13</td>
               <td>*Username - Testing3</td>
            </tr>
         </table>
      </div>
   </div>
   <!-- Popover 2 hidden title -->
   <div id="commentPopoverHiddenTitle" style="display: none">
      Error comments
   </div>
 </div>

JQuery：

$(function(){
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$("#commentPopover").popover({
    html : true, 
    content: function() {
      return $('#commentPopoverHiddenContent').html();
    },
    title: function() {
      return $('#commentPopoverHiddenTitle').html();
    }
});
});

这是一个小提琴：http://jsfiddle.net/5bsykcqt/

【讨论】：