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="↑"/> &nbsp; <input type="button" name="btn2" value="↓"/></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="↑"/> &nbsp; <input type="button" name="btn2" value="↓"/></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="↑"/> &nbsp; <input type="button" name="btn2" value="↓"/></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="↑"/> &nbsp; <input type="button" name="btn2" value="↓"/></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="↑"/> &nbsp; <input type="button" name="btn2" value="↓"/></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(); /*获得上一个tr的信息*/$jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1); /*把上一个tr序号加1*/jQuery(obj).parent().parent().html("").append($jqSublObj.html()); /*把本身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, table_self_id, td_self_id){var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child"); /*获得最后一个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();/*获得本身tr的序号*/if(objVal == lastTrVal){/*判断是否想把最后一行往下移*/return;}else{nextMoveTrOpra(obj, td_self_id); /*调用下移操作方法*/}}/*下移操作*/function nextMoveTrOpra(obj, td_self_id){var $jqObj = jQuery(obj).parent().parent().clone();/*获得并复制本身tr的信息*/var $jqSiblObj = jQuery(obj).parent().parent().next(); /*获得下一个tr的信息*/$jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1); /*把下一个tr序号减1*/jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); /*把本身tr清空并插入下一个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*/$jqSiblObj.html("").append($jqObj.html()); /*把下一个tr清空并插入临时保存的tr信息*/$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">/*onclick=prevMoveTrCommand(this,'show_table_id','td_num');这个地方千万不要带空格，否则乱码*/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 += "&nbsp; <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 += "&nbsp; <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 += "&nbsp; <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 += "&nbsp; <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 += "&nbsp; <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>
页:
[1]