我们在操作列表数据的时候，需要调整数据行的排列顺序，比如上下移动行，将行数据设置到顶部等。这些操作都可以通过点击前端的按钮来完成，加上简单的动态效果，表格数据很容易排序。

运行渲染：

HTML页面是一个简单的数据表。我们在数据行中分别放置了“上移”、“下移”和“顶端”三个链接，分别定义了三个类属性。我们将通过jQuery实现这些操作。

Table class='table' tr tdHTML5获取地理位置信息/tdtd 2015-04-25/tdtdtda href=' # ' class=' up '上移/a href=' # ' class='下移/a href=' # ' class=' top ' top/a/。Tr tr tdCSS Cookie实现固定页脚广告栏置顶/a/td /tr./table jQuery。我们需要提前加载jQuery库文件，然后分别绑定上移、下移、顶层三个操作的点击事件。以“上移”为例。点击时，获取当前点击行和tr的内容，然后判断该行是否为第一行。如果不是第一行，那就在前一行前面插入一行，从而实现互换的目的。当然，我们可以给线条添加fadeOut()和fadeIn()过渡效果，这样会让线条看起来更加生动，否则上移的过程会一晃而过。“下移”和“置顶”的操作过程类似。请查看代码：

$(function(){ //上移var $ up=$(')。up ')$ up . click(function(){ var $ tr=$(this)。父母(' tr ')；if ($tr.index()！=0) { $tr.fadeOut()。fadeIn()；$tr.prev()。前($ tr)；} });//下移var $down=$('。down’)；var len=$ down.length$ down . click(function(){ var $ tr=$(this))。父母(' tr ')；if ($tr.index()！=len - 1) { $tr.fadeOut()。fadeIn()；$tr.next()。after($ tr)；} });//top var $top=$('。top’)；$ top . click(function(){ var $ tr=$(this))。父母(' tr ')；$tr.fadeOut()。fadeIn()；$('.表')。prepend($ tr)；$tr.css('color '，' # f60 ')；});});当然，实际应用要结合你的项目。当“上移”、“下移”、“置顶”操作完成后，你要与后台程序进行Ajax异步交互，确保排序数据真正记录在后台，刷新后才会显示新的排序结果。本文将不详细解释异步操作。