javascriptまたはjqueryを使用したhtmlでの列の並べ替え

Question

私は列の順序付けで解決策を得る際に問題に直面しています。私は、列をドラッグするために、danvkライブラリ、jqGridのような多くのサードパーティライブラリを使用してきました。しかし、私がしたいのは、です。私はdivがあり、それに5つのフィールドがあります。 {FirstNJame、LastName、Address、Phone、Designation}にも上下のボタンがありますので、フィールドを上下に動かすことができます。 [Ok]ボタンでは、そのdivに設定したフィールドの順序に従ってテーブルの順序を設定します。つまり、短く、theadとtbodyの変更、そのdivにどのような順序が設定されているのかなどです。私は上下左右にプログラムされています。私はちょうどjavascriptまたはjqueryの列の位置を移動するソリューションが必要です。ありがとう。

Answer 1

これは、あなたが行くを取得する必要があります：（jQueryのを使用して）http://jsfiddle.net/S9ykD/

コード：

var order = [0,2,1,3]; 

$(function() { 
    $("table tr").each(function() { 
     var orderedTds = new Array(); 
     for (var i=0; i<order.length;i++) 
      orderedTds[i] = $(this).children("td")[order[i]]; 
     for (var i=0; i<order.length;i++) 
      $(this).append(orderedTds[i]); 
    }); 

}); 

これはサンプルのマークアップです：

<table> 
    <tr> 
     <td>aaa</td> 
     <td>bbb</td> 
     <td>ccc</td> 
     <td>ddd</td> 
    </tr> 
    <tr> 
     <td>111</td> 
     <td>222</td> 
     <td>333</td> 
     <td>444</td> 
    </tr> 
</table> 

Answer 2

ちょうどいくつかのjsライブラリを使用してください - 私はDatatablesを使用することをお勧めします。これは非常に素晴らしく、あなたはほとんどすべてを達成することができ、非常にcusotmizableです。または、あなたが慣れているものを使用してください。次に、ボタン上でクリックイベントを処理し、設定をライブラリに送信します。これは、Datatablesでかなりうまくいく可能性があります。 Datatables API docのfnSortまたはfnSortListenerを参照してください。