jQuery实现table中的tr上下移动并保持序号不变的实例代码
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上下移动并保持序号不变的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。