将表放入 Bootstrap 弹出窗口 [英] Putting table into Bootstrap popover
本文介绍了将表放入 Bootstrap 弹出窗口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 Bootstrap 弹出框,我试图将一个表格放入其中,但是当我点击它时它没有显示出来.这是第一次在弹出窗口中尝试 HTML,所以我不确定如何正确地进行.谢谢!
解决方案
这可能会有所帮助:
HTML:
<table border="1" style="width:100%"><tr><td>吉尔</td><td>史密斯</td><td>50</td></tr><tr><td>夏娃</td><td>杰克逊</td><td>94</td></tr><tr><td>约翰</td><td>Doe</td><td>80</td></tr>jQuery:
$('[data-toggle=popover]').popover({内容:$('#myPopoverContent').html(),html: 真的}).点击(功能(){$(this).popover('show');});
工作 jsFiddle:http://jsfiddle.net/ja3f6p4j/19/
I have a Bootstrap popover and I'm trying to put a table into it but then it doesn't show up when I click on it. This is the first time attempting HTML inside a popover so I'm unsure how to go about doing it correctly. Thanks!
$(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>
解决方案 This may help:
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');
});
Working jsFiddle: http://jsfiddle.net/ja3f6p4j/19/
这篇关于将表放入 Bootstrap 弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文