把表放入Bootstrap弹出窗口

Question

我有一个Bootstrap弹出窗口，我正试图放入一个表格，但是当它点击时它不会显示出来。这是第一次在popover中尝试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>

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> 

的jQuery：

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

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

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

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

Answer 2

这是我如何做的：

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/

Answer 3

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