jQuery实现table中的tr上下移动并保持序号不变

jQueryMoveTr.html代码如下：

 
  
  
  
 

 
	



































		
			
			
aaaaaaaaaa
			
@@@@@@@
			
   
			
注释1
		
		
			
			
bbbbbbbbbbbbb
			
#########
			
   
			
注释2
		
		
			
			
cccccccccccc
			
$$$$$$$$$$$$
			
   
			
注释3
		
		
			
			
ddddddddddddd
			
&&&&&&&&&&&&&
			
   
			
注释4
		
		
			
			
eeeeeeeeeeeeee
			
***************
			
   
			
注释5
		
	
 

jquery-rlutil-1.6.2.js代码如下：

[color=green]/*
 * 功能：使带有序号的table表格中的tr内容上下移动并保持序号不变
 *
 * 函数使用要求：
 * 1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
 * 2、上移按钮的name属性必须是 btn1，下移按钮的name属性必须是 btn2
 * 3、要有一个id=show_table_id的table元素，这个table元素里面放置n个tr套td的信息，其中有一个td的text是input框，input的value是序号值
 * 4、要求所有text内容为序号的td的class属性为 td_num
 *
 * @param: obj为一个button的对象
 * @param: table_self_id为table的id值
 * @param: td_self_id为内容是input序号框的td的class的属性值
 */
[/color]
[color=green]//上移指令[/color]function prevMoveTrCommand(obj, table_self_id, td_self_id){
	[color=green]/*
	//不带表头的写法	var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child");   //获得第一个tr的对象	var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();   //获得第一个tr里的input的value的序号	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  //获得本身tr的序号
    */[/color]
	[color=green]/*带表头的写法*/[/color]    var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)");   [color=green]/*获得第二个tr的对象*/[/color]	var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();   [color=green]/*获得第一个tr里的input的value的序号*/[/color]	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  [color=green]/*获得本身tr的序号*/[/color]

	if(objVal == firstTrVal){  [color=green]/*判断是否在把第一行向上移*/[/color]		return;
	}else{
		prevMoveTrOpra(obj, td_self_id);  [color=green] /*调用上移操作方法*/[/color]	}
}
[color=green]/*上移操作*/[/color]function prevMoveTrOpra(obj, td_self_id){
	var $jqObj = jQuery(obj).parent().parent().clone();  [color=green]/*获得并复制本身tr的信息*/[/color]	var $jqSublObj = jQuery(obj).parent().parent().prev();   [color=green]/*获得上一个tr的信息*/[/color]
	$jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1);   [color=green] /*把上一个tr序号加1*/[/color]	jQuery(obj).parent().parent().html("").append($jqSublObj.html());   [color=green]/*把本身tr清空并插入上一个信息*/[/color]	
	$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1);    [color=green]/*把本身tr序号减1*/[/color]	$jqSublObj.html("").append($jqObj.html());   [color=green]/*把上一个tr清空并插入临时保存的tr信息*/[/color]
	$jqObj.remove();   [color=green]/*删除复制的多余jQuery对象*/[/color]}

[color=green]/*下移指令*/[/color]function nextMoveTrCommand(obj, table_self_id, td_self_id){
	var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child");   [color=green]/*获得最后一个tr的对象*/[/color]	var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val();   [color=green]/*获得最后一个tr的序号*/[/color]	var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();  [color=green]/*获得本身tr的序号*/[/color]
	if(objVal == lastTrVal){  [color=green]/*判断是否想把最后一行往下移*/[/color]		return;
	}else{
		nextMoveTrOpra(obj, td_self_id);    [color=green]/*调用下移操作方法*/[/color]	}
}
[color=green]/*下移操作*/[/color]function nextMoveTrOpra(obj, td_self_id){
	var $jqObj = jQuery(obj).parent().parent().clone();  [color=green]/*获得并复制本身tr的信息*/[/color]	var $jqSiblObj = jQuery(obj).parent().parent().next();   [color=green]/*获得下一个tr的信息*/[/color]	
	$jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1);    [color=green]/*把下一个tr序号减1*/[/color]	jQuery(obj).parent().parent().html("").append($jqSiblObj.html());   [color=green]/*把本身tr清空并插入下一个tr信息*/[/color]
	$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1);    [color=green]/*把本身tr序号加1*/[/color]	$jqSiblObj.html("").append($jqObj.html());   [color=green]/*把下一个tr清空并插入临时保存的tr信息*/[/color]
	$jqObj.remove();    [color=green]/*删除复制的多余jQuery对象*/[/color]}

jswension.html代码如下：