如何在 jQuery 中移动表行？

假设我有向上/向下箭头的链接，用于按顺序向上或向下移动表行。将该行向上或向下移动一个位置(使用 jQuery)的最直接方法是什么？

似乎没有任何直接的方法可以使用 jQuery 内置的方法来实现这一点，在使用 jQuery 选择了行之后，我还没有找到移动它的方法。而且，在我的例子中，使行可拖动(我以前用插件做过)不是一个选项。

102774

小开

最佳答案

你也可以做一些非常简单的可调节的向上/向下. 。

假设你的链接有一个类 up或者 down，你可以在链接的点击处理程序中将它连接起来。这也是在假设链接位于网格的每一行内的情况下进行的。

$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});

HTML:

<table>
<tr>
<td>One</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Four</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Five</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
</table>

Demo-JsFiddle

$(document).ready(function () { $(".up,.down").click(function () { var $element = this; var row = $($element).parents("tr:first"); if($(this).is('.up')){ row.insertBefore(row.prev()); } else{ row.insertAfter(row.next()); } });