jQuery实现行下上移动并删除(顺序不变) _Web前端

jQuery实现行上下移动并删除(顺序不变)

页面效果如下：

HTML代码如下：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery实现行上下移动并删除(顺序不变)</title>
	<style>
		.rowNum {width:10px;text-align:center;border:none}
		.btn    {width:10px;text-align:center}
		td      {padding-left:5px;padding-right:5px;padding-top:3px;padding-bottom:3px}	
	</style>
</head>
<body>
	<table id="tbHide" style="display:none">
		<tr id="trHide"></tr>
	</table>
	<table border="1" id="tbShow">
		<thead>
			<tr>
				<th>No</th>
				<th>Name</th>
				<th colspan="3">操作</th>
				<th>Id</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>First</td>
				<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
				<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
				<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
				<td><input type="text"   name="rowNum"  value="1" readonly class="rowNum"></td>
			</tr>
			<tr>
				<td>2</td>
				<td>Second</td>
				<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
				<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
				<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
				<td><input type="text"  name="rowNum"   value="2" readonly class="rowNum"></td>
			</tr>
			<tr>
				<td>3</td>
				<td>Third</td>
				<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
				<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
				<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
				<td><input type="text"   name="rowNum"  value="3" readonly class="rowNum"></td>
			</tr>
			<tr>
				<td>4</td>
				<td>Forth</td>
				<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
				<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
				<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
				<td><input type="text"   name="rowNum"  value="4" readonly class="rowNum"></td>
			</tr>
			<tr>
				<td>5</td>
				<td>Fifth</td>
				<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
				<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
				<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
				<td><input type="text"   name="rowNum"  value="5" readonly class="rowNum"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

JavaScript如下：

<script>
	var tempSelector = "td:last-child input[name=rowNum]";
	
	// Button点击
	function move(obj){
		var btnType = $(obj).attr("name");
		var currRow = $(obj).parent().parent();
		
		if(btnType == "btnUp"){
			moveUpCommand(currRow);
		}else if(btnType == "btnDown"){
			moveDownCommand(currRow);
		}else if(btnType == "btnDel"){
			delRowOperate(currRow);
		}
	}
	
   // move up	
   function moveUpCommand(currRow){
	   var firstTr = $("#tbShow tbody tr:first-child");
	   var firstTrNo = Number($(firstTr).find(tempSelector).val());
	   var currRowNo = Number($(currRow).find(tempSelector).val());
	   if(currRowNo == firstTrNo){
		   return;
	   }else{
		   moveUpOperate(currRow);
	   }
   }
   
   // move down
   function moveDownCommand(currRow){
	   var lastTr = $("#tbShow tbody tr:last-child");
	   var lastTrNo  = Number($(lastTr).find(tempSelector).val());
	   var currRowNo = Number($(currRow).find(tempSelector).val());
	   if(currRowNo == lastTrNo){
		   return;
	   }else{
		   moveDownOperate(currRow);
	   }
   }
   
   // delete row
   function delRowOperate(currRow){
	   $(currRow).nextAll().each(function(){
		   $(this).find(tempSelector).val(Number($(this).find(tempSelector).val())-1);
	   });
	   $(currRow).remove();
   }
   
   // move up operate
   function moveUpOperate(currRow){
	   var tempRow = $("#trHide").html($(currRow).html());
	   var prevRow = $(currRow).prev();
	   
	   var prevRowNo = $(prevRow).find(tempSelector).val();
	   var tempRowNo = $(tempRow).find(tempSelector).val();
	   
	   // current row
	   $(prevRow).find(tempSelector).val(Number(prevRowNo)+1);
	   $(currRow).html("").append($(prevRow).html());
	   
	   // previous row
	   $(tempRow).find(tempSelector).val(Number(tempRowNo)-1);
	   $(prevRow).html("").append($(tempRow).html());
	   
	   $("#trHide").html("");
   }
   
   // move down operate
   function moveDownOperate(currRow){
	   var tempRow = $("#trHide").html($(currRow).html());
	   var nextRow = $(currRow).next();
	   var nextRowNo = $(nextRow).find(tempSelector).val();
	   var tempRowNo = $(tempRow).find(tempSelector).val();
	   
	   // current row
	   $(nextRow).find(tempSelector).val(Number(nextRowNo)-1);
	   $(currRow).html("").append($(nextRow).html());
	   
	   // next row
	   $(tempRow).find(tempSelector).val(Number(tempRowNo)+1);
	   $(nextRow).html("").append($(tempRow).html());
	   
	   $("#trHide").html("");
   }
	   
</script>