DDR爱好者之家

jQuery实现table中的tr上下移动并保持序号不变的实例代码
站长资源 2024/11/29 佚名
39 1538
DDR爱好者之家 Design By 杰米

jQueryMoveTr.html

代码如下： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>jQuery-bhang</TITLE>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.js">


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

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






jswension.html代码如下：





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>JavaScript拼接版</TITLE>
 <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.js">


以上这篇jQuery实现table中的tr上下移动并保持序号不变的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米