Отображение дополнительных данных из таблицы на hover

Question

Я создаю небольшое веб-приложение, в котором данные извлекаются с сервера через скрипт php. Это делается с помощью методов AJAX JQuery. Затем примерно три столбца должны быть сдвинуты вниз в таблице, а когда пользователь наводится над строкой, тогда дополнительные данные сдвигаются вниз под этой строкой.

Мой вопрос:

(a). Как сползать вниз по таблице (я могу добавить ее в div, но она выглядит не очень элегантно).

(b) Как я могу хранить дополнительные данные для каждой строки и сдвигать ее под этой строкой в ​​таблице.

Любая помощь будет принята с благодарностью, RayQuang

Answer 1

В вашем HTML:

<a href='' class='hoverlink'>row that always displays<span> 
fill this span with your query results and html formatting</span></a> 

В вашем CSS:

.hoverlink span { 
    display:none; } 
.hoverlink span:hover { 
    display:block; } 

В качестве альтернативы, если вы хотите использовать JQuery зависимый скрипт, вы не ошибетесь с animatedcollapse.js от Dynamic Drive, он работает довольно хорошо и легко настраивается.