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);

在具体例子中的应用

效果

jQuery操作table数据上移、下移和置顶_第1张图片

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 >1td>
                    <td>第一个td>
                    <td><a class="Up blueColor">上移a>    <a class="down blueColor">下移a>    <a class="top blueColor">置顶a>td>
                tr>
                <tr>
                    <td>2td>
                    <td>第二个td>
                    <td><a class="Up blueColor">上移a>    <a class="down blueColor">下移a>    <a class="top blueColor">置顶a>td>
                tr>
                <tr>
                    <td>3td>
                    <td>第三个td>
                    <td><a class="Up blueColor">上移a>    <a class="down blueColor">下移a>    <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}

 

你可能感兴趣的:(前端)