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

Question

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

Answer 1

我使用jQuery tooltip这种事情。您可以使用bodyHandler选项来执行Javascript来填充工具提示窗格，您可以任意选择样式。看例子。

Answer 2

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

Answer 3

绑定一个mouseover事件侦听器 - 这种方式当他们将鼠标悬停在您的回调将被调用的预期元素上。在回调函数内部，你可以访问触发事件的元素 - 在你的情况td或tr中 - 使用适当的jquery选择器获得整行内容。然后你可以显示一个对话框，现在你可以在对话框中显示内容。

Answer 4

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

有（至少）两种方式做它：

1. 预填充和隐藏（CSS）：建立HTML网页上的所有可见的单元格内弹出的详细表，使用CSS来定位他们'在主层之上（并在单元之外），并且使用display:none，并添加一个.maincell:hover .detailtable { display:block;}，以便在光标位于主单元格中时使它们可见。

2. AJAX：绑定功能到每一个主小区的"mouseenter"/"mouseleave"事件，有使用AJAX来从所述服务器和显示在定位<div>得到详细表，最好是在一个固定的地方，或也许几个像素在光标的右侧（如果它是一个小桌子）。 jQuery的$("#inspector").load(dataURL)函数使其变得非常简单（其中“检查器”是插入详细信息表的<div>的ID）。