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

jQueryMoveTr.html

代码如下:

jQuery-bhang

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

jswension.HTML代码如下:

JavaScript拼接版 <Meta http-equiv="Content-Type" content="text/html; charset=GBK">

<script type="text/javascript">

[color=green]/onclick=prevMoveTrCommand(this,'td_num'); 这个地方千万不要带空格,否则乱码/[/color]
jQuery(document).ready(function(){
var str = "";
str += "<tr>";
str += "

</td>";
str += "<td>aaaaaaaaaa</td>";
str += "<td>@@@@@@@</td>";
str += "
<input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'td_num'); />";
str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'td_num'); /></td>";
str += "<td>注释1</td>";
str += "</tr>";
str += "<tr>";
str += "
</td>";
str += "<td>bbbbbbbbbbbbb</td>";
str += "<td>#########</td>";
str += "
<input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'td_num'); /></td>";
str += "<td>注释2</td>";
str += "</tr>";
str += "<tr>";
str += "
</td>";
str += "<td>cccccccccccc</td>";
str += "<td>$$$$$$$$$$$$</td>";
str += "
<input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'td_num'); /></td>";
str += "<td>注释3</td>";
str += "</tr>";
str += "<tr>";
str += "
</td>";
str += "<td>ddddddddddddd</td>";
str += "<td>&&&&&&&&&&&&&</td>";
str += "
<input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'td_num'); /></td>";
str += "<td>注释4</td>";
str += "</tr>";
str += "<tr>";
str += "
</td>";
str += "<td>eeeeeeeeeeeeee</td>";
str += "<td>***</td>";
str += "
<input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'td_num'); /></td>";
str += "<td>注释5</td>";
str += "</tr>";

$("#show_table_id").html(str);

});

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...