Showing additional data from a table on hover

I am making a small web application in which data is fetched from the server via a php script. This is done with Jquery's AJAX methods. Then about three columns are to be slid down in a table, and when the user hovers over a row, then the additional data is slid down under that row.

My question is:

(a). How do I slide down the table (I can append it to a div but it does not look very elegant).

(b) How would I go about storing the additional data for each row, and slide it under that row in the table.

Any 开发者_开发问答help would be greatly appreciated, RayQuang

In your html:

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

In your CSS:

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

Alternatively, if you'd like to use a jquery dependent script, you couldn't go wrong with animatedcollapse.js from Dynamic Drive, it works rather well and is easily customizable.