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

Question

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

score 1 · Accepted Answer · February 27, 2009 11:37

我将 jQuery工具提示用于此类操作。您可以使用bodyHandler选项执行Javascript来填充工具提示窗格，您可以随意设置样式。请参阅示例。

score 0 · Answer 2 · February 27, 2009 11:13

可以。您可以使用 http://dev.iceburg.net/jquery/jqModal/ 来完成这个。

score 0 · Answer 3 · February 27, 2009 11:27

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

score 1 · Answer 4 · February 27, 2009 11:49

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

（至少）有两种方法可以做到这一点：

预填充和隐藏（CSS）：在HTML页面上构建可见单元格内的所有弹出明细表，使用CSS将它们定位在“主”层上方（并超出该单元格），并带有display:none ，并添加.maincell:hover .detailtable { display:block;}以使它们在光标位于主单元格中时可见。
AJAX：将函数绑定到每个主单元格的"mouseenter"/"mouseleave"事件，在那里您可以使用AJAX从服务器获取详细信息表并显示在已定位的<div>中，最好在固定的位置，或者可能是几个光标右边的像素（如果是一张小桌子）。 jQuery的$("#inspector").load(dataURL)函数使其变得非常简单（“ inspector”是插入明细表的<div>的ID）。

4 个答案