针对这种情况在列表中设置数据样式的最佳方法?

时间:2011-01-11 22:25:11

标签: javascript jquery css list

首先,我愿意接受其他方式的建议。

开始here是我想要实现的目标的形象(对于BAD油漆工作而言,抱歉)

好的..我有一个请求被解雇并发回一大堆json,其中包含有关学生姓名,性别,年龄,位置的信息。

我想以列表元素的形式构建一种表格,每个元组包含一个请求返回的唯一学生。

我想以特定的方式对其进行样式设置,因此它会显示为一行,但每条数据都显示为蜂窝状,如带有边框的特定宽度等。因为每个数据片段都是唯一的html元素具有特定的css样式,但它在用户看来是单行。 (如图中的第2和第3幅图像。)

将鼠标悬停在元组(行)中的数据元素上会更改该行中所有单元格的悬停状态。

结束单元格包含一个加号...单击此按钮将更新页面上另一个div中的数据。而单击一行中的其他单元格会将该人带到与该特定学生相关的另一页面。

除了使用Javascript以外的任何东西(图书馆都可以,即jQuery)和CSS,最好的方法是什么?

我的想法是如何做得好还是有更好的方法?

如果我的请求带回25个结果,也值得注意,我只想一次显示10个但是这个人必须能够以某种方式查看其余的15个。我怎么会这样做呢?

提前致谢。

1 个答案:

答案 0 :(得分:0)

我目前没有测试此工具的工具,但可能会在行容器上设置悬停属性,例如:

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

或类似的东西。

关于显示10/25元素的问题部分...你可以用JavaScript隐藏它并有一个按钮来显示它们我想,我不确定你为什么要这样做。如果要对结果进行分页,最好在服务器端实现一些东西。