国产成人精品免费,中文久久久久,亚洲天堂aaa

導航首頁 ? 技術教程 ? jQuery實現table中的tr上下移動并保持序號不變的實例代碼

全站頭部文字我要出現在這里

jQuery實現table中的tr上下移動并保持序號不變的實例代碼 720 2024-02-25

jQueryMoveTr.html

代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>jQuery-bhang</TITLE>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery-1.6.2.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/jquery-1.6.2.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/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實現table中的tr上下移動并保持序號不變的實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類