jQuery表格上移下移置顶js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery表格上移下移置顶js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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;border-bottom: 1px solid #ddd;}
.table tr:hover {background-color: #f5f5f5;}
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function(){
	//上移
	var $up = $(".up")
    $up.click(function() {
        var $tr = $(this).parents("tr");
        if ($tr.index() != 0) {
			$tr.fadeOut().fadeIn();
			$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.fadeOut().fadeIn();
            $tr.next().after($tr);
        }
    });
	//置顶
	var $top = $(".top");
	$top.click(function(){
		var $tr = $(this).parents("tr");
		$tr.fadeOut().fadeIn();
		$(".table").prepend($tr);
		$tr.css("color","#f60");
	});
});
</script>

</head>

<body>
<div class="demo">
	<table class="table">
		<tr>
			<td>HTML5获取地理位置定位信息</td>
			<td>2015-04-25</td>
			<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
		</tr>
		<tr>
			<td>CSS+Cookie实现的固定页脚广告条</td>
			<td>2015-04-18</td>
			<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
		</tr>
		<tr>
			<td>纯CSS3制作漂亮的价格表</td>
			<td>2015-04-10</td>
			<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
		</tr>
		<tr>
			<td>jQuery实现的测试答题功能</td>
			<td>2015-03-29</td>
			<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>
		</tr>
	</table>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)