jquery 实现table行交换：上移/下移

最新推荐文章于 2020-08-17 14:14:02 发布

weixin_34256074

最新推荐文章于 2020-08-17 14:14:02 发布

阅读量559

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/javaFresh/blog/596679

版权

2019独角兽企业重金招聘Python工程师标准>>>

$(document).ready(function () {
    //上移
    $("input.upbtn").each(function () {
        $(this).click(function () {
            var $tr = $(this).parents("tr");
            if ($tr.index() != 0) {
                $tr.prev().before($tr);//在每个匹配的元素之前插入内容。
            }
        });
    });
    //下移
    var trLength = $("input.downbtn").length; 
        $("input.downbtn").each(function () {
            $(this).click(function () {
            var $tr = $(this).parents("tr"); 
            if ($tr.index() != trLength - 1) { 
                $tr.next().after($tr);//在每个匹配的元素之后插入内容。
            }
        });
    });
});

<table>
<tr>
    <td>4</td>
    <td><input type="button" value="上移" class="upbtn" />
        <input type="button" value="下移" class="downbtn" />
    </td>
</tr>
<tr>
    <td>5</td>
    <td><input type="button" value="上移" class="upbtn" />
        <input type="button" value="下移" class="downbtn" />
    </td>
</tr>
<tr>
    <td>6</td>
    <td><input type="button" value="上移" class="upbtn" />
        <input type="button" value="下移" class="downbtn" />
    </td>
</tr>
</table>

转载于:https://my.oschina.net/javaFresh/blog/596679