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">
<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> <a class="down blueColor">下移</a> <a class="top blueColor">置顶</a></td>
</tr>
<tr>
<td>2</td>
<td>第二个</td>
<td><a class="Up blueColor">上移</a> <a class="down blueColor">下移</a> <a class="top blueColor">置顶</a></td>
</tr>
<tr>
<td>3</td>
<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) {//判断是否为第一行
$tr.prev().before($tr);
}
})
//下移
var trLength = $(".down").length;
$(".down").click(function(){
var $tr = $(this).parents("tr");
if ($tr.index() != trLength - 1) {//判断是否为最后一行
$tr.next().after($tr);
}
})
//置顶
$(".top").click(function(){
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$(".table").prepend($tr);
})
})
附 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}
重要提示：目标 .table请不要嵌套使用，否则$(“.table").parents("tr") 会找错目标！！！切记切记。尽量将.table单独写出来，不要与其它table嵌套使用。
转载于:https://www.cnblogs.com/fuchuanzhipan1209/p/7761695.html
