注册

jQuery实现控制表格行上移下移置顶实例

嗨豆壳技术文章 时间:2015-05-28 10:50:38 [ray]

本文分享一个jQuery实现表格行上移下移和置顶的功能代码,涉及jQuery操作页面元素的相关知识,在交互设计中,是个不错的技巧。值得学习一下。

<html>
 <head>
 <meta charset="utf-8">
 <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="//ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2"></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>Linux命令大全//www.hi-docs.com/linux.html</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>CSS3在线手册//www.hi-docs.com/css.html</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>Javascript文档//www.hi-docs.com/javascript.html</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在线学习手册//www.hi-docs.com/jquery.html</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>

需要注意的是:该功能只是页面的操作,如果需要把调整后的数据保存到数据库,需要把当前页面结果提交到后台处理。本文这里不作介绍。

标签

本文地址:https://www.hi-docs.com/article/141.html

上一篇:PHP常用功能类 - 生成随机图片验证码

下一篇:linux date命令实现日期时间和Unix时间戳转换