当用户将鼠标悬停在另一个表格的单元格上时，如何显示数据表？

Question

我需要从对象列表中生成一个表。每行仅包含每个对象的基本信息。但是，当用户将鼠标悬停在特定单元格上时，我想要一个弹出窗口，其中包含该特定对象的所有信息。也许弹出窗口应该是一个表格的形式，其中包含某种细节？我该如何做到这一点？我可以使用JQuery以及它的一些效果吗？

Answer 1

我使用jQuery tooltip来做这件事。您可以使用bodyHandler选项执行Javascript来填充工具提示窗格，您可以随意设置样式。参见示例。

Answer 2

是的，jQuery非常适合这类事情。

有（至少）两种方法：

1. 预先填充和隐藏（CSS）：在HTML页面上构建可见单元格内的所有弹出详细信息表，使用CSS将它们“置于”主层（并在单元格之外），并使用{ {1}}，并添加display:none，以便在光标位于主单元格时显示它们。

2. AJAX：将函数绑定到每个主单元格的.maincell:hover .detailtable { display:block;} / "mouseenter"事件，在那里使用AJAX从服务器获取详细信息表并显示在定位{{1} }，最好是在固定的地方，或者可能是光标右边的几个像素（如果它是一个小桌子）。 jQuery的"mouseleave"函数使其变得容易（其中'inspector'是您插入详细信息表的<div>的ID）。

Answer 3

是的，你可以。您可以使用http://dev.iceburg.net/jquery/jqModal/来完成此任务。

Answer 4

绑定鼠标悬停事件监听器 - 当它们悬停在预期元素上时，将调用您的回调。在回调内部，您可以访问触发事件的元素 - 在您的情况下使用td或tr - 使用适当的jquery选择器获取整行的内容。然后，您可以显示一个对话框，现在您可以在对话框中显示内容。