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

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1584 次日期：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>

</HEAD>

<BODY>

<tr>

<td>aaaaaaaaaa</td>

</tr>

<tr>

<td>bbbbbbbbbbbbb</td>

</tr>

<tr>

<td>cccccccccccc</td>

</tr>

<tr>

<td>ddddddddddddd</td>

</tr>

<tr>

<td>eeeeeeeeeeeeee</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>

[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>

</BODY>

</HTML>

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

上一篇：Bootstrap3制作搜索框样式的方法

下一篇：一个简单不报错的summernote 图片上传案例

手机网站地址：jQuery实现table中的tr上下移动并保持序号不变的实例代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！