2011-07-18 18 views
8

クラスの名前に基づいてテーブル行を並べ替える必要があります。
以下は私のHTMLコードです。クラス名に基づいてテーブル行を並べ替える

<table> 
<tr class="a4"><td>4</td></tr> 
<tr class="a6"><td>6</td></tr> 
<tr class="a1"><td>1</td></tr> 
<tr class="a2"><td>2</td></tr> 
<tr class="a5"><td>5</td></tr> 
<tr class="a3"><td>3</td></tr> 
</table> 

だから今、クラス名のA1となど。第一、第二、同様にA2表示されるはずです。..

誰かが私あなたがthisプラグインを使用することができ

答えて

12

I外部プラグインに依存したくない場合は、match()を使用してクラス名から番号を抽出し、組み込みのsort()メソッドを使用して要素をソートすることができます。

そこから、あなたがテーブルの行を並べ替えるためにappend()を使用することができます(これは、テーブルからそれぞれの行を削除します適切な位置でそれを再度追加):

$("table").append($("tr").get().sort(function(a, b) { 
    return parseInt($(a).attr("class").match(/\d+/), 10) 
     - parseInt($(b).attr("class").match(/\d+/), 10); 
})); 

あなたはthis fiddleで結果を見ることができます。

+0

すばらしいアイデア..ありがとうalot :-) – Reddy

+0

おかげです。 – zero8

3

など何かに助けてください:

ここ
jQuery.fn.sortElements = (function(){ 

    var sort = [].sort; 

    return function(comparator, getSortable) { 

     getSortable = getSortable || function(){return this;}; 

     var placements = this.map(function(){ 

      var sortElement = getSortable.call(this), 
       parentNode = sortElement.parentNode, 

       // Since the element itself will change position, we have 
       // to have some way of storing its original position in 
       // the DOM. The easiest way is to have a 'flag' node: 
       nextSibling = parentNode.insertBefore(
        document.createTextNode(''), 
        sortElement.nextSibling 
       ); 

      return function() { 

       if (parentNode === this) { 
        throw new Error(
         "You can't sort elements if any one is a descendant of another." 
        ); 
       } 

       // Insert before flag: 
       parentNode.insertBefore(this, nextSibling); 
       // Remove flag: 
       parentNode.removeChild(nextSibling); 

      }; 

     }); 

     return sort.call(this, comparator).each(function(i){ 
      placements[i].call(getSortable.call(this)); 
     }); 

    }; 

})(); 
// do the sorting 
$('tr').sortElements(function(a, b){ 
    return $(a).attr('class') > $(b).attr('class') ? 1 : -1; 
}); 

フィドル:http://jsfiddle.net/ZV5yc/1/

+0

これは、より高い評価のおかげで、より良いと思います。 – zero8

+0

http://jsfiddle.net/zeroeight/ZV5yc/50/ – zero8