jquery 实现上移、下移

最新推荐文章于 2022-12-02 15:06:00 发布

前方太黑暗

最新推荐文章于 2022-12-02 15:06:00 发布

阅读量966

点赞数 1

分类专栏： jquery 文章标签： jquery实现上移、下移

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/106261346

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

样式：

点击上移、下移实现显示位置变化。

html部分代码：

<table id="order_table"> 
	<tr> 
		<td>HTML5获取地理位置定位信息</td> 
		<td><a href="#" onclick="up(this)">上移</a> <a href="#" class="down" onclick="down(this)">下移</a></td> 
	</tr>
	<tr> 
		<td>HTML5获取地理位置定位信息1</td> 
		<td><a href="#" onclick="up(this)">上移</a> <a href="#" class="down" onclick="down(this)">下移</a></td> 
	</tr> 
	<tr> 
		<td>HTML5获取地理位置定位信息2</td> 
		<td><a href="#" onclick="up(this)">上移</a> <a href="#" class="down" onclick="down(this)">下移</a></td> 
	</tr>
</table>

js代码

// 上移
function up(_this){
	var $tr = $(_this).parent().parent(); 
	  if ($tr.index() != 0) { 
	   $tr.fadeOut().fadeIn(); 
	   $tr.prev().before($tr); 
	  }else{
		  ws.tools.modalDialog.alert("最上面了",3);
	  }
}
//下移
function down(_this){
	var $tr = $(_this).parent().parent();
	var $down = $(".down"); 
	var len = $down.length;
	if ($tr.index() != len - 1) { 
	   $tr.fadeOut().fadeIn(); 
	   $tr.next().after($tr); 
	}else{
		ws.tools.modalDialog.alert("最下面了",3);
	}
}

大家有疑问可以添加qq群：789318548，也可以关注今日头条《老徐聊技术》我会解答。