jQuery實(shí)現(xiàn)table中的tr上下移動(dòng)并保持序號(hào)不變的實(shí)例代碼
更新時(shí)間：2016年07月11日 10:14:03 投稿：jingxian
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)table中的tr上下移動(dòng)并保持序號(hào)不變的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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代碼如下：
* 功能：使帶有序號(hào)的table表格中的tr內(nèi)容上下移動(dòng)并保持序號(hào)不變
*
* 函數(shù)使用要求：
* 1、要求在使用此函數(shù)前必須先引用 jquery-1.6.2.js 文件
* 2、上移按鈕的name屬性必須是 btn1，下移按鈕的name屬性必須是 btn2
* 3、要有一個(gè)id=show_table_id的table元素，這個(gè)table元素里面放置n個(gè)tr套td的信息，其中有一個(gè)td的text是input框，input的value是序號(hào)值
* 4、要求所有text內(nèi)容為序號(hào)的td的class屬性為 td_num
*
* @param: obj為一個(gè)button的對(duì)象
* @param: table_self_id為table的id值
* @param: td_self_id為內(nèi)容是input序號(hào)框的td的class的屬性值
*/
/上移指令
function prevMoveTrCommand(obj, table_self_id, td_self_id){
*
//不帶表頭的寫(xiě)法
var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child");
//獲得第一個(gè)tr的對(duì)象
var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();
//獲得第一個(gè)tr里的input的value的序號(hào)
var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();
//獲得本身tr的序號(hào) 帶表頭的寫(xiě)法
var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)");
/*獲得第二個(gè)tr的對(duì)象*/
var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();
/*獲得第一個(gè)tr里的input的value的序號(hào)*/
var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();
/*獲得本身tr的序號(hào)*/
if(objVal == firstTrVal){
/*判斷是否在把第一行向上移*/
return;
}else{
prevMoveTrOpra(obj, td_self_id);
/*調(diào)用上移操作方法*/
}
}
/*上移操作*/
function prevMoveTrOpra(obj, td_self_id){
var $jqObj = jQuery(obj).parent().parent().clone(); /*獲得并復(fù)制本身tr的信息*/ var $jqSublObj = jQuery(obj).parent().parent().prev();<span style="font-family: Arial, Helvetica, sans-serif;"> /*獲得上一個(gè)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;"> /*把上一個(gè)tr序號(hào)加1*/</span> jQuery(obj).parent().parent().html("").append($jqSublObj.html()); <span style="font-family: Arial, Helvetica, sans-serif;"> /*把本身tr清空并插入上一個(gè)信息*/</span>
$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1); /*把本身tr序號(hào)減1*/ $jqSublObj.html("").append($jqObj.html()); /*把上一個(gè)tr清空并插入臨時(shí)保存的tr信息*/
$jqObj.remove(); /*刪除復(fù)制的多余jQuery對(duì)象*/}
/*下移指令*/ 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;">/*獲得最后一個(gè)tr的對(duì)象*/</span> var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val(); /*獲得最后一個(gè)tr的序號(hào)*/ var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); <span style="font-family: Arial, Helvetica, sans-serif;"> /*獲得本身tr的序號(hào)*/</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;">/*調(diào)用下移操作方法*/</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;"> /*獲得并復(fù)制本身tr的信息*/</span> var $jqSiblObj = jQuery(obj).parent().parent().next(); <span style="font-family: Arial, Helvetica, sans-serif;"> /*獲得下一個(gè)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;"> /*把下一個(gè)tr序號(hào)減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清空并插入下一個(gè)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序號(hào)加1*/</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span> $jqSiblObj.html("").append($jqObj.html()); <span style="font-family: Arial, Helvetica, sans-serif;">/*把下一個(gè)tr清空并插入臨時(shí)保存的tr信息*/</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span> $jqObj.remove(); /*刪除復(fù)制的多余jQuery對(duì)象*/ }
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'); 這個(gè)地方千萬(wàn)不要帶空格，否則亂碼*/[/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>
以上這篇jQuery實(shí)現(xiàn)table中的tr上下移動(dòng)并保持序號(hào)不變的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery關(guān)于頁(yè)面焦點(diǎn)的定位(文本框獲取焦點(diǎn)時(shí)改變樣式 )
用戶在輸入文字時(shí)，如果能高亮顯示正在輸入的那個(gè)文本框的話，會(huì)更人性化些，下面就使用jQuery來(lái)實(shí)現(xiàn)。2010-09-09
jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
juqery 學(xué)習(xí)之五 文檔處理 包裹、替換、刪除、復(fù)制
這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素（它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的），并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素－－這個(gè)祖先元素就是包裹元素。2011-02-02
這篇文章主要介紹了JS中判斷null、undefined與NaN的方法,需要的朋友可以參考下2014-03-03
Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧
jquery在程序開(kāi)發(fā)ajax應(yīng)用程序時(shí)提高了效率，減少了需要兼容性的問(wèn)題，當(dāng)我們?cè)赼jax項(xiàng)目中，遇到ajax異步獲取數(shù)據(jù)出錯(cuò)該怎么解決呢，我們可以通過(guò)捕捉error事件來(lái)獲取出錯(cuò)的信息，本文給大家介紹jquery ajax error調(diào)試錯(cuò)誤的技巧，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
這篇文章主要介紹了基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除功能，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過(guò)max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測(cè)試通過(guò),需要的朋友可以參考下2014-07-07
jquery.Ajax()方法調(diào)用Asp.Net后臺(tái)的方法解析
本篇文章主要是對(duì)jquery.Ajax()方法調(diào)用Asp.Net后臺(tái)的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
下面小編就為大家?guī)?lái)一篇使用JQuery中的trim()方法去掉前后空格。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
本篇文章主要介紹了jQuery中l(wèi)ayer分頁(yè)器的使用，實(shí)例介紹了layer分頁(yè)器的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03