首页
所有分类
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 offsetX与layerX区别
Mar 12 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jQuery选择器全面总结
Jan 06 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jquery移动节点实例
Jan 14 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 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
阿联酋购物网站(26) 欧洲购物网站(15) 哥伦比亚购物网站(5) 土耳其购物网站(10) 荷兰购物网站(99) 泰国购物网站(30) 瑞典购物网站(55) 南非购物网站(8) 芬兰购物网站(10) 葡萄牙购物网站(13)
You might like
php图片处理：加水印、缩略图的实现（自定义函数：watermark、thumbnail）
2010/12/02 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python读取excel表格生成erlang数据
2017/08/26 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python爬虫可以爬什么
2020/06/16 Python
浅析Python requests 模块
2020/10/09 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
加热夹克：RAVEAN
2018/10/19 全球购物
我的珠宝盒：Ma boîte à bijoux
2019/08/27 全球购物
捷克街头、运动和滑板一站式商店：BoardStar.cz
2019/10/06 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
工作目标责任书
2014/07/23 职场文书
Python中使用ipython的详细教程
2021/06/22 Python