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

2024-03-15 19:51:03 327

jQueryMoveTr.html

代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>jQuery-bhang</TITLE>
<scripttype="text/javascript"src="jquery-1.6.2.js"></script>
<scripttype="text/javascript"src="jquery-rlutil-1.6.2.js"></script>
</HEAD>

<BODY>
<tableid="show_table_id"border="1">
<tr>
<tdclass="td_num"><inputtype="text"name="td_num_tn"readonly="true"style="border:0px;width:10px;"value="1"/></td>
<td>aaaaaaaaaa</td>
<td>@@@@@@@</td>
<tdalign="center"><inputtype="button"name="btn1"value="↑"onclick="prevMoveTrCommand(this,'show_table_id','td_num');"/><inputtype="button"name="btn2"value="↓"onclick="nextMoveTrCommand(this,'show_table_id','td_num');"/></td>
<td>注释1</td>
</tr>
<tr>
<tdclass="td_num"><inputtype="text"name="td_num_tn"readonly="true"style="border:0px;width:10px;"value="2"/></td>
<td>bbbbbbbbbbbbb</td>
<td>#########</td>
<tdalign="center"><inputtype="button"name="btn1"value="↑"onclick="prevMoveTrCommand(this,'show_table_id','td_num');"/><inputtype="button"name="btn2"value="↓"onclick="nextMoveTrCommand(this,'show_table_id','td_num');"/></td>
<td>注释2</td>
</tr>
<tr>
<tdclass="td_num"><inputtype="text"name="td_num_tn"readonly="true"style="border:0px;width:10px;"value="3"/></td>
<td>cccccccccccc</td>
<td>$$$$$$$$$$$$</td>
<tdalign="center"><inputtype="button"name="btn1"value="↑"onclick="prevMoveTrCommand(this,'show_table_id','td_num');"/><inputtype="button"name="btn2"value="↓"onclick="nextMoveTrCommand(this,'show_table_id','td_num');"/></td>
<td>注释3</td>
</tr>
<tr>
<tdclass="td_num"><inputtype="text"name="td_num_tn"readonly="true"style="border:0px;width:10px;"value="4"/></td>
<td>ddddddddddddd</td>
<td>&&&&&&&&&&&&&</td>
<tdalign="center"><inputtype="button"name="btn1"value="↑"onclick="prevMoveTrCommand(this,'show_table_id','td_num');"/><inputtype="button"name="btn2"value="↓"onclick="nextMoveTrCommand(this,'show_table_id','td_num');"/></td>
<td>注释4</td>
</tr>
<tr>
<tdclass="td_num"><inputtype="text"name="td_num_tn"readonly="true"style="border:0px;width:10px;"value="5"/></td>
<td>eeeeeeeeeeeeee</td>
<td>***************</td>
<tdalign="center"><inputtype="button"name="btn1"value="↑"onclick="prevMoveTrCommand(this,'show_table_id','td_num');"/><inputtype="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的属性值
*/
/上移指令
functionprevMoveTrCommand(obj,table_self_id,td_self_id){
*
//不带表头的写法
var$jqFirstTr=jQuery("#"+table_self_id+"tr:first-child");
//获得第一个tr的对象
varfirstTrVal=$jqFirstTr.find("."+td_self_id+"input:nth-child(1)").val();
//获得第一个tr里的input的value的序号
varobjVal=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的对象*/
varfirstTrVal=$jqFirstTr.find("."+td_self_id+"input:nth-child(1)").val();
/*获得第一个tr里的input的value的序号*/
varobjVal=jQuery(obj).parent().parent().find("."+td_self_id+"input:nth-child(1)").val();
/*获得本身tr的序号*/

if(objVal==firstTrVal){
/*判断是否在把第一行向上移*/
return;
}else{
prevMoveTrOpra(obj,td_self_id);
/*调用上移操作方法*/
}
}
/*上移操作*/
functionprevMoveTrOpra(obj,td_self_id){
var$jqObj=jQuery(obj).parent().parent().clone();/*获得并复制本身tr的信息*/var$jqSublObj=jQuery(obj).parent().parent().prev();<spanstyle="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);<spanstyle="font-family:Arial,Helvetica,sans-serif;">/*把上一个tr序号加1*/</span>jQuery(obj).parent().parent().html("").append($jqSublObj.html());<spanstyle="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对象*/}

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

jswension.html代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>JavaScript拼接版</TITLE>
<metahttp-equiv="Content-Type"content="text/html;charset=GBK">
<scripttype="text/javascript"src="jquery-1.6.2.js"></script>
<scripttype="text/javascript"src="jquery-rlutil-1.6.2.js"></script>

<scripttype="text/javascript">

[color=green]/*onclick=prevMoveTrCommand(this,'show_table_id','td_num');这个地方千万不要带空格，否则乱码*/[/color]
jQuery(document).ready(function(){
varstr="";
str+="<tr>";
str+="<tdclass='td_num'><inputtype='text'name='td_num_tn'readonly='true'style='border:0px;width:10px;'value='1'/></td>";
str+="<td>aaaaaaaaaa</td>";
str+="<td>@@@@@@@</td>";
str+="<tdalign='center'><inputtype='button'name='btn1'value='↑'onclick=prevMoveTrCommand(this,'show_table_id','td_num');/>";
str+="<inputtype='button'name='btn2'value='↓'onclick=nextMoveTrCommand(this,'show_table_id','td_num');/></td>";
str+="<td>注释1</td>";
str+="</tr>";
str+="<tr>";
str+="<tdclass='td_num'><inputtype='text'name='td_num_tn'readonly='true'style='border:0px;width:10px;'value='2'/></td>";
str+="<td>bbbbbbbbbbbbb</td>";
str+="<td>#########</td>";
str+="<tdalign='center'><inputtype='button'name='btn1'value='↑'onclick=prevMoveTrCommand(this,'show_table_id','td_num');/>";
str+="<inputtype='button'name='btn2'value='↓'onclick=nextMoveTrCommand(this,'show_table_id','td_num');/></td>";
str+="<td>注释2</td>";
str+="</tr>";
str+="<tr>";
str+="<tdclass='td_num'><inputtype='text'name='td_num_tn'readonly='true'style='border:0px;width:10px;'value='3'/></td>";
str+="<td>cccccccccccc</td>";
str+="<td>$$$$$$$$$$$$</td>";
str+="<tdalign='center'><inputtype='button'name='btn1'value='↑'onclick=prevMoveTrCommand(this,'show_table_id','td_num');/>";
str+="<inputtype='button'name='btn2'value='↓'onclick=nextMoveTrCommand(this,'show_table_id','td_num');/></td>";
str+="<td>注释3</td>";
str+="</tr>";
str+="<tr>";
str+="<tdclass='td_num'><inputtype='text'name='td_num_tn'readonly='true'style='border:0px;width:10px;'value='4'/></td>";
str+="<td>ddddddddddddd</td>";
str+="<td>&&&&&&&&&&&&&</td>";
str+="<tdalign='center'><inputtype='button'name='btn1'value='↑'onclick=prevMoveTrCommand(this,'show_table_id','td_num');/>";
str+="<inputtype='button'name='btn2'value='↓'onclick=nextMoveTrCommand(this,'show_table_id','td_num');/></td>";
str+="<td>注释4</td>";
str+="</tr>";
str+="<tr>";
str+="<tdclass='td_num'><inputtype='text'name='td_num_tn'readonly='true'style='border:0px;width:10px;'value='5'/></td>";
str+="<td>eeeeeeeeeeeeee</td>";
str+="<td>***************</td>";
str+="<tdalign='center'><inputtype='button'name='btn1'value='↑'onclick=prevMoveTrCommand(this,'show_table_id','td_num');/>";
str+="<inputtype='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>
<tableid="show_table_id"border="1"></table>
</BODY>
</HTML>

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

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

热门推荐

随机推荐