jQuery实现table中的tr上下移动并保持序号不变的实
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇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="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></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="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></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="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></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="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></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="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="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的属性值
*/
/上移指令
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对象*