當用戶將鼠標懸停在另一個表格的單元格上時，如何顯示數據表？

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）。