jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1872 次日期：2016-07-28 16:01:59

溫馨提示：易賢網(wǎng)小編為您整理了“jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼”,方便廣大網(wǎng)友查閱！

下面小編就為大家?guī)硪黄猨Query實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。

jQueryMoveTr.html 代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>jQuery-bhang</TITLE>

</HEAD>

<BODY>

<tr>

<td>aaaaaaaaaa</td>

</tr>

<tr>

<td>bbbbbbbbbbbbb</td>

</tr>

<tr>

<td>cccccccccccc</td>

</tr>

<tr>

<td>ddddddddddddd</td>

</tr>

<tr>

<td>eeeeeeeeeeeeee</td>

</tr>

</table>

</BODY>

</HTML>

jquery-rlutil-1.6.2.js 代碼如下：

* 功能：使帶有序號的table表格中的tr內(nèi)容上下移動并保持序號不變

* 函數(shù)使用要求：

* 1、要求在使用此函數(shù)前必須先引用 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內(nèi)容為序號的td的class屬性為 td_num

* @param: obj為一個button的對象

* @param: table_self_id為table的id值

* @param: td_self_id為內(nèi)容是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);

/*調(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;"> /*獲得上一個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(); /*刪除復(fù)制的多余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;">/*調(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;"> /*獲得下一個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(); /*刪除復(fù)制的多余jQuery對象*/ }

jswension.html 代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>JavaScript拼接版</TITLE>

[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>

</BODY>

</HTML>

以上這篇jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考

更多信息請查看網(wǎng)絡(luò)編程

上一篇：Bootstrap3制作搜索框樣式的方法

下一篇：一個簡單不報錯的summernote 圖片上傳案例

易賢網(wǎng)手機網(wǎng)站地址：jQuery實現(xiàn)table中的tr上下移動并保持序號不變的實例代碼

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實例詳解10月30日

Objective-C Json 實例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法10月30日

python生成二維碼的實例詳解10月30日

Python批量更改文件名的實現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實例代碼10月30日

vue.js todolist實現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實例代碼10月30日

apache 開啟重定向 rewrite的實現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報班

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合