欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年07月11日 10:14:03   投稿：jingxian  
下面小編就為大家?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>
 <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內(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>
 <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>

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

相關(guān)文章

  • jquery獲取當(dāng)前元素索引值用法實例

    jquery獲取當(dāng)前元素索引值用法實例

    這篇文章主要介紹了jquery獲取當(dāng)前元素索引值用法,實例分析了jQuery獲取當(dāng)前元素索引在創(chuàng)建圖片輪播效果中的使用技巧,需要的朋友可以參考下
    2015-06-06
  • Jquery根據(jù)瀏覽器窗口改變調(diào)整大小的方法

    Jquery根據(jù)瀏覽器窗口改變調(diào)整大小的方法

    下面小編就為大家?guī)硪黄狫query根據(jù)瀏覽器窗口改變調(diào)整大小的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • 如何使用Jquery獲取Form表單中被選中的radio值

    如何使用Jquery獲取Form表單中被選中的radio值

    下面就日常最常用的，在Form表單中如何獲取被中選的Radio值做一小小的示例，感興趣的朋友可以參考下
    2013-08-08
  • jquery實現(xiàn)相冊一下滑動兩次的方法

    jquery實現(xiàn)相冊一下滑動兩次的方法

    這篇文章主要介紹了jquery實現(xiàn)相冊一下滑動兩次的方法,是非常實用的圖片特效技巧,需要的朋友可以參考下
    2015-02-02
  • jquery live()重復(fù)綁定的解決方法介紹

    jquery live()重復(fù)綁定的解決方法介紹

    本篇文章主要是對jquery中l(wèi)ive()重復(fù)綁定的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01

    • 最新評論