jq实现表格上下行切换

最新推荐文章于 2024-07-31 15:52:50 发布

hwt1154

最新推荐文章于 2024-07-31 15:52:50 发布

阅读量676

点赞数 4

分类专栏： jq

本文链接：https://blog.csdn.net/m0_37647939/article/details/80420645

版权

jq 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

效果图:

改变前:

改变后:

HTML:

<table>
<tr>
<th>id</th>
<th>name</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>
上
下
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>
上
下
</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>
上
下
</td>
</tr>
</table>

JS
//上移
$("span.upbtn").e
ach(function () {
$(this).click(function () {
console.log(1)
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
});
//下移
var trLength = $("span.downbtn").length;
$("span.downbtn").each(function () {
$(this).click(function () {
console.log(2)
var $tr = $(this).parents("tr");
if ($tr.index() != trLength - 1) {
$tr.next().after($tr);
}
});
});

注意 ! ! ! !
需引入JQuery