Best way to style data in a list for this situation?

First off I'm open for suggestions of alternative ways of doing things.

To get going here is an image of what I want to achieve(kind of, sorry for the BAD paint job)

OK.. I have a request that gets fired off and sends back a ton of json containing information about Pupils Names, Sex, Age, Location.

I wa开发者_如何学JAVAnt to build a sort of table in the form of list elements, each tuple containing one unique student that the request returns.

I want to style it in a specific way, so it would appear as a row but each piece of data appears cellular, as in its a specific width with a border etc. As in each peice of data is a unique html element with a specific css style, but it appears to the user as a single row. (As in the 2nd and 3rd image in the drawing.)

Hovering over the data elements in a tuple(row) changes the hover state of all the cells in that row.

The end cell contains a plus..clicking this will update data in another div on the page. Whereas clicking the other cells in a row will take the person to another page related to that particular pupil.

Without using anything other than Javascript(librarys are okay i.e jQuery) and CSS how is the best way to go about this?

Is my thinking of how to do it okay or is there a better way?

Its also worth noting if my requests brings back 25 results, I only want to show 10 at a time but the person must be able to somehow view the remaining 15. How would I go about this also?

Thanks in advance.

I don't have the tools to test this at the moment, but it might work to set a hover property on the row-container, for example:

div.row:hover div.cell {
  background: #006;
}

Or something like that.

For the part of your question about showing 10/25 elements...you could hide it with JavaScript and have a button to show them I guess, I'm not sure about why you are doing this. It might be better to implement something server-side if you want to paginate results.