首页
所有分类
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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
一个简单不报错的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
欢迎词(65) 证婚词(21) 检讨书(456) 辞职信(98) 事迹材料(636) 介绍信(57) 邀请函(127) 广播稿(323) 表扬信(62) 道歉信(39)
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础－3 代码组织和重用2
2011/07/03 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Windows下python3.7安装教程
2018/07/31 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python梯度下降算法的实现
2020/02/24 Python
python右对齐的实例方法
2020/07/05 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
美国批发零售网站：GearXS
2016/07/26 全球购物
领导干部考察材料
2014/02/08 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
python图像处理基本操作总结（PIL库、Matplotlib及Numpy）
2021/06/08 Python
关于python类SortedList详解
2021/09/04 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS
德生BCL3000抢先使用感受和评价
2022/04/07 无线电