Jquery 关于table整行上下移动的代码

最新推荐文章于 2024-02-28 10:11:27 发布

Douzi87

最新推荐文章于 2024-02-28 10:11:27 发布

阅读量1.1k

点赞数 1

文章标签： tr行移动

本文链接：https://blog.csdn.net/Douzi87/article/details/78258982

版权

这篇博客介绍了如何使用jQuery实现表格（table）中行的上下移动功能。通过点击带有向上或向下箭头的span元素，可以将当前行与其相邻的行进行交换。同时，代码还更新了行号，确保交换后行号的正确显示。

摘要由CSDN通过智能技术生成

上下移动table整行

JS.代码：

$('span').click(function () { //鼠标点击 span
              var spanHTML = $(this).html(); //获得向上或向下箭头
              var $tr = $(this).parent().parent(); //获得当前那一行
              var $oTr;
              if (spanHTML == '↑') {
                  $oTr = $tr.prev(); //获得上一个 tr
                  $tr.insertBefore($oTr);
              } else {
                  $oTr = $tr.next(); //获得下一个 tr
                  $tr.insertAfter($oTr);
              }
              var $table = $(this).parent().parent().parent();
              var numSerials = 1;
              $table.find("tr").each(function () {
                  var $thisTr = $(this);
                  $thisTr.find("td").eq(0).html(numSeri