首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 11, 2016

jQueryMoveTr.html

代码如下： 

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

 <BODY>
  <table id="show_table_id" border="1">
    <tr>
      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td>
      <td>aaaaaaaaaa</td>
      <td>@@@@@@@</td>
      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
      <td>注释1</td>
    </tr>
    <tr>
      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td>
      <td>bbbbbbbbbbbbb</td>
      <td>#########</td>
      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
      <td>注释2</td>
    </tr>
    <tr>
      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td>
      <td>cccccccccccc</td>
      <td>$$$$$$$$$$$$</td>
      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
      <td>注释3</td>
    </tr>
    <tr>
      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td>
      <td>ddddddddddddd</td>
      <td>&&&&&&&&&&&&&</td>
      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
      <td>注释4</td>
    </tr>
    <tr>
      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td>
      <td>eeeeeeeeeeeeee</td>
      <td>***************</td>
      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>
      <td>注释5</td>
    </tr>
  </table>
 </BODY>
</HTML>

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="jquery-1.6.2.js"></script>
 <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script>

 <script type="text/javascript">
  
  [color=green]/*onclick=prevMoveTrCommand(this,'show_table_id','td_num'); 这个地方千万不要带空格，否则乱码*/[/color]
  jQuery(document).ready(function(){
    var str = "";
    str += "<tr>";
    str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='1' /></td>";
    str += "<td>aaaaaaaaaa</td>";
    str += "<td>@@@@@@@</td>";
    str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
    str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
    str += "<td>注释1</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='2' /></td>";
    str += "<td>bbbbbbbbbbbbb</td>";
    str += "<td>#########</td>";
    str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
    str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
    str += "<td>注释2</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='3' /></td>";
    str += "<td>cccccccccccc</td>";
    str += "<td>$$$$$$$$$$$$</td>";
    str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
    str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
    str += "<td>注释3</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='4' /></td>";
    str += "<td>ddddddddddddd</td>";
    str += "<td>&&&&&&&&&&&&&</td>";
    str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
    str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
    str += "<td>注释4</td>";
    str += "</tr>";
    str += "<tr>";
    str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='5' /></td>";
    str += "<td>eeeeeeeeeeeeee</td>";
    str += "<td>***************</td>";
    str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />";
    str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>";
    str += "<td>注释5</td>";
    str += "</tr>";

    $("#show_table_id").html(str);
  });
    
 </script>
 </HEAD>

 <BODY>
  <table id="show_table_id" border="1"></table> 
 </BODY>
</HTML>

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

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 #Javascript
Bootstrap实现弹性搜索框
Jul 11 #Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
战锤40K(1) 模拟人生(1) 吸血鬼(1) 遗弃(1) 暴雪(1) 铁拳(1) 小缇娜的奇幻之地(1) 绿林侠盗(1) LOL(1) 东方异文石(1)
You might like
php xfocus防注入资料
2008/04/27 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
javascript比较文档位置
2008/04/08 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue实现导航栏效果（选中状态刷新不消失）
2017/12/13 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
Python 专题五 列表基础知识（二维list排序、获取下标和处理txt文本实例）
2017/03/20 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python中的对数log函数表示及用法
2020/12/09 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
高档奢华时装在线目的地：FORWARD by elyse walker
2017/10/16 全球购物
365 Tickets英国：全球景点门票
2019/07/06 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
团员的自我评价
2013/12/01 职场文书
审计主管岗位职责
2014/01/31 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
说明书怎么写
2014/05/06 职场文书
一份文言文检讨书
2014/09/13 职场文书
实验心得体会范文
2016/01/25 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python