jquery实现表格行上移下移和置顶

最新推荐文章于 2018-10-02 13:16:00 发布

agi52790

最新推荐文章于 2018-10-02 13:16:00 发布

阅读量177

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pengxiangchong/p/8328788.html

版权

注意引本地的jquery~

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery实现表格行上移下移和置顶</title>
<style type="text/css">
.demo{width:600px; margin:60px auto 10px auto; font-size:16px}
.table {border-collapse: collapse !important;width: 100%;max-width: 100%;margin-bottom: 20px;}
.table td,.table th {background-color: #fff !important;}
.table-bordered th,.table-bordered td {border: 1px solid #ddd !important;}
.table tr td {padding: 8px;line-height: 1.42857143;vertical-align: middle;}
.table tr:hover {background-color: #f5f5f5;}
</style>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
//上移
var $up = $(".up")
$up.click(function() {
console.log($(this).parents("tr").index());
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.prev().before($tr);
}
});
//下移
var $down = $(".down");
var len = $down.length;
$down.click(function() {
var $tr = $(this).parents("tr");
if ($tr.index() != len - 1) {
$tr.next().after($tr);
}
});
//置顶
var $top = $(".top");
$top.click(function(){
var $tr = $(this).parents("tr");
$(".table").prepend($tr);
});
});
</script>
</head>
<body>
<div id="main">
<div class="demo">
<table class="table">
<tr>
<td>第一行文字</td>
<td>2018-01-01</td>
<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
</tr>
<tr>
<td>第二行文字</td>
<td>2018-01-02</td>
<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
</tr>
<tr>
<td>第三行文字</td>
<td>2018-01-03</td>
<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
</tr>
<tr>
<td>第四行文字</td>
<td>2018-01-04</td>
<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>