当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - 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 want 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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: