用jQuery实现表格数据上下交换顺序

最新推荐文章于 2022-11-13 23:54:39 发布

weixin_34185560

最新推荐文章于 2022-11-13 23:54:39 发布

阅读量383

点赞数

文章标签： javascript 前端 xhtml ViewUI

原文链接：https://my.oschina.net/kisscucci/blog/186866

版权

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格数据上下行互换位置</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
    <script type="text/javascript">

$(document).ready(function() {
    //上移
    $("input.upbtn").click(function() {
        var $tr = $(this).parents("tr");
        if ($tr.index() != 0) {
            $tr.prev().before($tr);
        }
    });
    //下移
    var $downbtns = $("input.downbtn");
    var len = $downbtns.length;
    $downbtns.click(function() {
        var $tr = $(this).parents("tr");
        if ($tr.index() != len - 1) {
            $tr.next().after($tr);
        }
    });
});

</script>
</head>
<body>
<table border="1" cellpadding=0 cellspacing=0>
    <tr>
        <td>4</td>
        <td>xxx44xxxx</td>
        <td>2013-5-24</td>
        <td><input type="button" value="上移" class="upbtn"  /><input type="button" value="下移" class="downbtn" /></td>
    </tr>
    <tr>
        <td>5</td>
        <td>xxxx55xxx</td>
        <td>2013-5-25</td>
        <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
</tr>
    <tr>
        <td>6</td>
        <td>xxxx66xxx</td>
        <td>2013-5-26</td>
        <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
    </tr>
    <tr>
        <td>7</td>
        <td>xxxx77xxx</td>
        <td>2013-5-27</td>
        <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
    </tr>
    <tr>
        <td>8</td>
        <td>xxx88xxxx</td>
        <td>2013-5-28</td>
        <td><input type="button" value="上移" class="upbtn" /><input type="button" value="下移" class="downbtn" /></td>
    </tr>
</table>
</body>
</html>

转载于:https://my.oschina.net/kisscucci/blog/186866