jquery - 如何在表格单元格中添加弹出框？

Question

实际上，我正在尝试在弹出框内悬停时显示单个单元格的一些数据。问题是我想要做的是在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({})   
});

在代码里面。

下表看起来像这样

标签： jqueryhtmlbootstrap-4

Answer 1

表格单元格需要在大多数浏览器中呈现内容。处理此问题的一种方法是用不间断的空间填充它们。您可以在下面的代码中看到，只需添加   实体作为 <td> 元素的内容。

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>