gpt4 book ai didi

jquery - 如何向表格单元格添加弹出框?

转载 作者:行者123 更新时间:2023-12-01 08:35:58 25 4
gpt4 key购买 nike

实际上,我试图在悬停在弹出窗口内的单个单元格上显示一些数据。问题是我想做的是在 td 标记内添加数据切换,但它没有效果。

每个单元格看起来像这样:

<td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover"></td>

每个单元格的内容都是动态的。

显然是函数

    $(document).ready(function(){
$('[data-toggle="popover"]').popover({})
});

在代码内部。

下表看起来像这样

enter image description here

最佳答案

表格单元格需要包含在大多数浏览器中呈现的内容。解决这个问题的一种方法是用不间断的空格填充它们。您可以在下面的代码中看到,弹出窗口只需添加   即可工作。实体作为 元素内容。

jQuery('[data-toggle="popover"]').popover({})   
table {
border-collapse: collapse;
}

td {
border: 1px solid #808080;
min-width: 1ex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<table>
<tr><td>33</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 5</td><td></td><td></td><td></td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td style="padding: 0px; background-color: red;" data-toggle="popover" data-content="IGOR" data-trigger="hover">&nbsp;</td><td></td></tr>
<tr><td>Tavolo 6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>Tavolo 7</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

关于jquery - 如何向表格单元格添加弹出框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55382857/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com