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

jQueryMoveTr.html

代码如下：

 
 
 
 
 

 
  

    

      

      
aaaaaaaaaa
      
@@@@@@@
      
  
      
注释1
    
    

      

      
bbbbbbbbbbbbb
      
#########
      
  
      
注释2
    
    

      

      
cccccccccccc
      
$$$$$$$$$$$$
      
  
      
注释3
    
    

      

      
ddddddddddddd
      
&&&&&&&&&&&&&
      
  
      
注释4
    
    

      

      
eeeeeeeeeeeeee
      
***************
      
  
      
注释5
    
  
 

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

* 功能：使带有序号的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的属性值
 */
/上移指令
function prevMoveTrCommand(obj, table_self_id, td_self_id){
  *
  //不带表头的写法  
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的序号 带表头的写法
  var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)"); 

 var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val(); 
 
 var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();

  
  if(objVal == firstTrVal){ 
  
   return;
  }else{
    prevMoveTrOpra(obj, td_self_id); 
   
 }
}

function prevMoveTrOpra(obj, td_self_id){
  var $jqObj = jQuery(obj).parent().parent().clone();     var $jqSublObj = jQuery(obj).parent().parent().prev();   $jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1);   jQuery(obj).parent().parent().html("").append($jqSublObj.html());     
  $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1);      $jqSublObj.html("").append($jqObj.html());   
  $jqObj.remove(); }

    function nextMoveTrCommand(obj, table_self_id, td_self_id){
  var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child");    var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val();       var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();    if(objVal == lastTrVal){     return;
  }else{
    nextMoveTrOpra(obj, td_self_id);  	 }}
  function nextMoveTrOpra(obj, td_self_id){
  var $jqObj = jQuery(obj).parent().parent().clone();     var $jqSiblObj = jQuery(obj).parent().parent().next();      $jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1);  
  jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); 
  $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1); 
  $jqSiblObj.html("").append($jqObj.html()); 
  $jqObj.remove();   }

jswension.html代码如下：

以上这篇jQuery实现table中的tr上下移动并保持序号不变的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。