假设我有向上/向下箭头的链接，用于按顺序向上或向下移动表格行。将该行向上或向下移动一个位置（使用 jQuery）的最直接方法是什么？
似乎没有任何直接的方法可以使用 jQuery 的内置方法来执行此操作，并且在使用 jQuery 选择行后，我还没有找到移动它的方法。此外，在我的情况下，使行可拖动（我以前用插件完成过）不是一个选项。
如何在 jQuery 中移动表格行？
IT技术
javascript
jquery
html
dom
2021-03-17 10:19:50
2个回答
您还可以使用可调节的向上/向下做一些非常简单的事情。
鉴于您的链接有一类，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>
$(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());
}
});
});
尝试使用 JSFiddle
其它你可能感兴趣的问题