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

Asked
Viewd1294

0

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

4 个答案

1

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

0

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

0

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

1

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

(至少)有两种方法可以做到这一点:

  1. 预填充和隐藏(CSS):在HTML页面上构建可见单元格内的所有弹出明细表,使用CSS将它们定位在“主”层上方(并超出该单元格),并带有display:none ,并添加.maincell:hover .detailtable { display:block;}以使它们在光标位于主单元格中时可见。

  2. AJAX:将函数绑定到每个主单元格的"mouseenter"/"mouseleave"事件,在那里您可以使用AJAX从服务器获取详细信息表并显示在已定位的<div>中,最好在固定的位置,或者可能是几个光标右边的像素(如果是一张小桌子)。 jQuery的$("#inspector").load(dataURL)函数使其变得非常简单(“ inspector”是插入明细表的<div>的ID)。