表格数据上下行互换位置

最新推荐文章于 2022-07-13 15:42:36 发布

moqiang02

最新推荐文章于 2022-07-13 15:42:36 发布

阅读量2.5k

点赞数

分类专栏： JS+JQuery

JS+JQuery 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

<!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="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(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);
                    }
                });
            });
        });
    
    </script>
</head>
<body>
<table border="1" cellpadding=0 cellspacing=0>
    <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>

moqiang02

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格数据上下行互换位置

表格数据上下行互换位置 $(document).ready(function () { //上移 $("input.upbtn").each(function () { $(this).click(function () { var $tr = $(t
复制链接

扫一扫