足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程
jQuery实现table中的tr上下移动并保持序号不变的实例代码
来源：易贤网 阅读：1613 次 日期：2016-07-28 16:01:59
温馨提示：易贤网小编为您整理了“jQuery实现table中的tr上下移动并保持序号不变的实例代码”,方便广大网友查阅！

下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

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上下移动并保持序号不变的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考

中国足彩网信息请查看网络编程
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：Bootstrap3制作搜索框样式的方法
下一篇：一个简单不报错的summernote 图片上传案例
易贤网手机网站地址：jQuery实现table中的tr上下移动并保持序号不变的实例代码
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读网络编程
Shell中如何删除文本比较长的行的实现方法10月30日
vue.js语法及常用指令10月30日
python 读写中文json的实例详解10月30日
Objective-C Json 实例详解10月30日
bootstrap table sum总数量统计实现方法10月30日
python生成二维码的实例详解10月30日
Python批量更改文件名的实现方法10月30日
解决出现Incorrect integer value的问题10月30日
jQuery实现切换隐藏与显示同时切换图标功能10月30日
docker python api 安装配置的详解10月30日
javascript按钮禁用和启用的效果实例代码10月30日
vue.js todolist实现代码10月30日
vue.js 父向子组件传参的实例代码10月30日
apache 开启重定向 rewrite的实现方法10月30日
Vue.js划分组件的方法10月30日
python logging日志模块的详解10月30日
vue中的scope使用详解10月30日
docker cgroup 资源监控的详解10月30日
使用Android Studio 开发自己的SDK教程10月23日
linux系统下MongoDB单节点安装教程10月23日
易贤网移动网站

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
2024年临沧市临翔区交通运输局城镇公益性岗位人员招聘公告
2024年12月玉溪市交通职业教育产业开发有限公司招聘公告
2024年昆明市五华区人社局信息服务中心招聘公告
2024年澄江星崟传媒科技有限公司第一期见习人员招募公告（10人）
2024年大理州检察机关招聘聘用制书记员（二批）公告（2号）
2024年云南省妇女儿童发展中心招聘面试公告
2024年上海新纪元教育集团招聘公告
2024年版纳州景洪市自然资源局公益性岗位人员招聘公告
2024年怒江州贡山县人民法院招聘公告
2024年12月玉溪市公安局红塔分局公开招聘警务辅助人员公告
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标