jQueryでテーブルの行の上下移動とトップのeffect_jqueryを実現

リストデータを操作する場合、行を上下に移動したり、行データを先頭に移動したりするなど、データ行の順序を調整する必要があります。これらの操作は、フロントエンドのボタンをクリックすることで完了でき、単純なダイナミクスを伴うので、事実上、テーブル データを簡単に並べ替えることができます。

HTML

このページは単純なデータテーブルで、データ行に「上へ移動」、「下へ移動」、「上へ」という3つのリンクを配置し、それぞれjQuery操作で実装してみます。

 
<table class="table"> 
  <tr> 
    <td>HTML5获取地理位置定位信息</td> 
    <td>2015-04-25</td> 
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td> 
  </tr> 
  <tr> 
    <td>CSS+Cookie实现的固定页脚广告条置顶</a></td> 
  </tr> 
  ... 
</table> 

jQuery

事前に jQuery ライブラリ ファイルをロードし、上に移動、下に移動、上に移動の 3 つの操作のクリック イベントをそれぞれバインドする必要があります。例として「上へ移動」をクリックすると、現在クリックされている行の内容とtrを取得し、その行が最初の行であるかどうかを判断し、最初の行でない場合はその行の前に行を挿入します。前の行で交換の目的は達成されました。もちろん、フェードアウト() およびフェードイン() トランジション効果を行に追加することもできます。これにより、より鮮やかに見えます。そうしないと、上向きの動きがあっという間に過ぎてしまいます。 「下に移動」と「上に移動」の操作プロセスは似ています。コードを参照してください:

 
$(function(){ 
  //上移 
  var $up = $(".up") 
  $up.click(function() { 
    var $tr = $(this).parents("tr"); 
    if ($tr.index() != 0) { 
      $tr.fadeOut().fadeIn(); 
      $tr.prev().before($tr); 
       
    } 
  }); 
  //下移 
  var $down = $(".down"); 
  var len = $down.length; 
  $down.click(function() { 
    var $tr = $(this).parents("tr"); 
    if ($tr.index() != len - 1) { 
      $tr.fadeOut().fadeIn(); 
      $tr.next().after($tr); 
    } 
  }); 
  //置顶 
  var $top = $(".top"); 
  $top.click(function(){ 
    var $tr = $(this).parents("tr"); 
    $tr.fadeOut().fadeIn(); 
    $(".table").prepend($tr); 
    $tr.css("color","#f60"); 
  }); 
}); 

もちろん、実際のアプリケーションでは、「上に移動」、「下に移動」、「上へ」の操作が完了したら、バックグラウンド プログラムで Ajax の非同期対話を実行して、ソートされたことを確認する必要があります。データは実際にはバックグラウンドで記録され、更新後に新しい並べ替え結果が表示されます。この記事では、非同期操作については詳しく説明せず、ここで終了します。

以上がこの記事の全内容です。jQuery を学ぶ皆さんのお役に立てれば幸いです。