jQuery操作table数据上移、下移和置顶

最新推荐文章于 2023-01-11 12:00:43 发布

xiaozhen0610

最新推荐文章于 2023-01-11 12:00:43 发布

阅读量737

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2bhh1kihkcb.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

jQuery 操作table中的tr换行的步骤如下：

1、获取当前tr

 var $tr = $(this).parents("tr");

2、移动tr

//上移 
$tr.prev().before($tr);
//下移
 $tr.next().after($tr);
//置顶
 $(".table").prepend($tr);

在具体例子中的应用

效果

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Table数据 上移  下移  置顶</title>
    <link rel="stylesheet" href="css/table.css">
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
       
    </script>
</head>
<body>
<div class="rightSide">
    <div class="whiteBg">
        <div class="bord screen">

            <div class="clear"></div>
        </div>
        <div class="commonTab marTop20">
            <table cellpadding="0" cellspacing="0" class="table">
                <thead>
                <th>序号</th>
                <th>名称</th>
                <th>操作</th>
                </thead>
                <tbody>
                <tr>
                    <td >1</td>
                    <td>第一个</td>
                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>第二个</td>
                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>第三个</td>
                    <td><a class="Up blueColor">上移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="down blueColor">下移</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="top blueColor">置顶</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

jquery操作：

 $(document).ready(function(){
            $(".Up").click(function(){
                var $tr = $(this).parents("tr");
                if ($tr.index() != 0) {//判断是否为第一行
                    var id1=$tr.children("td:first-child").text();//当前序号
                    var id=$tr.prev().children("td:first-child").text();//前一个序号
                    $tr.prev().children("td:first-child").text(id1);//交换序号
                    $tr.children("td:first-child").text(id);
                    $tr.prev().before($tr);
                }
            })
            //下移
            var trLength = $(".down").length;
            $(".down").click(function(){
                var $tr = $(this).parents("tr");
                if ($tr.index() != trLength - 1) {//判断是否为最后一行
                    var id1=$tr.children("td:first-child").text();//当前序号
                    var id=$tr.next().children("td:first-child").text();//下一行序号
                    $tr.next().children("td:first-child").text(id1);//交换序号
                    $tr.children("td:first-child").text(id);
                    $tr.next().after($tr);
                }
            })
            //置顶
            $(".top").click(function(){
                var $tr = $(this).parents("tr");
                $("tbody tr").each(function(){//遍历tr 把序号加一
                    var text =Number($(this).children("td:first-child").text());
                    text=Number(text+1);
                    $(this).children("td:first-child").text(text);
                })
                $tr.fadeOut().fadeIn();
                $tr.children("td:first-child").text(1)//被置顶行的序号置为一
                $(".table").prepend($tr);
                //  $tr.css("color","#f60");
            })
        })

附 css样式表

@charset "utf-8";
/* CSS Document */
/*格式化样式*/
*{margin:0;padding:0}
body{font:12px/1.5 Microsoft YaHei,Arial, Helvetica, sans-serif;color:#333;background:#edeff3}
table{width:100%; border-collapse:collapse;border:none;border-spacing:0}
a{color:#202020;text-decoration:none;cursor: pointer}
img{border:none}
input{vertical-align:middle;outline:none;font-family:Microsoft YaHei;border:none}
input[type="submit"]{cursor:pointer}
textarea{outline:none;outline:none;border:solid 1px #e2e2e2;resize:none}
ul,ol,dl{list-style:none;}
b,em,i,u,strong{font-weight:normal;font-style:normal;text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:normal;}

/*公共样式*/
.fl{float:left;}
.fr{float:right;}
.clear{clear:both}
.bord{border-bottom:solid 2px #f2f2f2}
.blueColor {color:#4893cc;}

/**table样式**/
.commonTab {padding: 0 25px; overflow: auto;padding-bottom: 80px;}
.commonTab table tr th {background: #eaeaea;border-left: solid 1px #f9f9f9;}
.commonTab table tr th {height: 35px; background: #eaeaea;font-weight: 100;font-size: 14px;border-left: solid 1px #f9f9f9;}
.marTop20{margin-top:20px}
.commonTab table tr td {border-left: solid 1px #f9f9f9;}
.commonTab table tr td {padding: 8px 0;font-size: 14px; border: solid 1px #f2f2f2;}
.rightSide{margin-left:10px;padding-top:24px;min-height:1000px;}
.screen {padding: 20px;}
.whiteBg{background:#fff;padding-bottom:70px}

xiaozhen0610

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作table数据上移、下移和置顶

jQuery 操作table中的tr换行的步骤如下：1、获取当前tr var $tr = $(this).parents("tr");2、移动tr//上移 $tr.prev().before($tr);//下移 $tr.next().after($tr);//置顶 $(".table").prepend($tr);在具体例子中的应用效果html代码：<!DOCTYPE html><html><head lang="en">
复制链接

扫一扫