javascript - 使 div 像表格一样排序

Question

我有数据被布置到 div 中的页面，主 div 设置为当用户将鼠标悬停在向上/向下按钮上时自动滚动。这是我所拥有的一个简单示例:

http://troycomptonworld.com/sorting

现在，如果用户单击其中一个列名称(名字、薪水等)，我需要添加对 div 进行升序或降序排序的功能。我怎样才能用 jQuery/javascript 做到这一点，但保留我所有的其他功能(即自动滚动和列标题被卡住)

Answer 1

首先，我建议您对 HTML 进行布局以更好地表示数据。现在，您有许多依次表示单元格的 div，将它们分成几行的唯一信息是样式。通常，您希望 HTML 的结构代表数据的结构(尝试查看关闭 CSS 的页面!)。

我更喜欢的布局方式是使用带有 <thead> 的实际 HTML 表格, <tfoot>和 <tbody> ，因为它是表格数据，然后将tbody上的样式设置为带有滚动的特定高度。

问题在于它在旧版浏览器中不起作用。不知道你对浏览器的兼容性要求是什么。

如果你要坚持<div>不过，至少要在每一行周围放置一个包含的 div。

一旦您拥有一个特定元素的每个子元素代表一行的结构，排序就变得微不足道了。您可以抓取所有元素，将它们放入一个数组中，对其进行排序，然后将它们塞回 DOM。

如果标题中的所有单元格也在某种容器中(同样，如果可能的话，最好是 <th> 中的 <tr> s)那么您可以计算出该容器中子元素的索引单击，然后使用每行中具有相同索引的子项的值对行进行排序。