jQuery实现table中的tr上下移动并保持序号不变
来源：互联网 发布：英国经济数据 编辑：程序博客网 时间：2024/06/05 11:45
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对象*/
} /*下移指令*/
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> <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"> [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> <table id="show_table_id" border="1"></table> </BODY></HTML> 0 0
- jQuery实现table中的tr上下移动并保持序号不变
- jquery 控制table tr 上下移动
- jquery实现tr元素的上下移动
- jquery上下移动<tr>
- table tr的上下移动
- jquery实现table tr td重组排序号
- jquery实现tr元素的上下移动示例代码
- table的数据行tr上下移动
- jquery实现递归table-tr
- html table tr td 上下移动行实例源代码
- tr 上下移动
- jQuery遍历table中的tr td并获取td中的值
- jquery实现左右上下移动
- jquery实现div上下移动
- jquery实现div上下移动
- js 上下键控制table里tr的背景上下移动选中效果
- JQuery实现table的排序（tr）
- 在表table最前插入tr多行并改为正常排列的序号
- JS报错：Permission denied to access property 'document'---document.domain - JavaScript的同源策略问题
- spring data jpa page interface
- Linux下*.tar.gz文件解压缩命令
- Java 连接MySQL数据库
- linux下批量替换文件内容
- jQuery实现table中的tr上下移动并保持序号不变
- 变量
- Javascript游戏，街头霸王
- 1004. Counting Leaves (30)——PAT (Advanced Level) Practise
- JAVA进阶-IO流(1)
- 面试技巧之简历编写
- Maven名词解释
- Convert Sorted Array to Binary Search Tree
- charset=gb2312和charset=utf-8的区别
