1

シンプルな HTML テーブルがあり、JQuery を使用して新しい行をテーブルに挿入したいと考えています。

各行には、val内部に UNIX タイムスタンプを持つカスタム属性があります。次に例を示します。

<tr data-val="1356998400"><!-- Some row content --></tr>

JQueryで新しい行を挿入したいのですが、val挿入後に属性でソートしたいです。

明らかな解決策は、 -s を行に設定idし、行配列を手動でスキャンして (時間値の比較を実行して) 挿入するたびに挿入する正しい場所を見つけることですが、JQuery のような解決策がもっとあるのでしょうか? この場合、一種の1行のソリューションが存在するはずです。

4

6 に答える 6

4

最初に、基本的な関数を使用してテーブルを並べ替えることができますsort(行がまだ並べ替えられていない場合)。

マークアップ

(注: カスタムval属性をデータ属性として追加しました)

<table>
  <tbody>
    <tr data-val="1"><td>1st</td></tr>
    <tr data-val="4"><td>3rd</td></tr>
    <tr data-val="7"><td>4th</td></tr>
    <tr data-val="2"><td>2nd</td></tr>
  </tbody>
</table>

jQuery

$('table').html(function() {
  return $(this).find('tr').sort(function(a, b) {
    return $(a).data('val') > $(b).data('val');
  });
});

行がソートされたら、新しい行を挿入する位置を簡単に見つけることがdata-valできdata-valますnewRow:

var $newRow = $('<tr data-val="3"><td>Between 2nd and 3rd!</td></tr>');
var elementToInsertBefore = $('tr').filter(function() {
    return $(this).data('val') >= $newRow.data('val');
}).get(0);

if (typeof elementToInsertBefore === 'undefined') {
    $('table').append($newRow);  
} else {
    $newRow.insertBefore(elementToInsertBefore);
}

そのため、フィルタが を返さない場合(つまり、より大きいか等しい をelementToInsertBefore持つ既存の行がなかった場合は、テーブルの最後に追加し、それ以外の場合は の前に挿入します。data-val$newRow's data-valelementToInsertBefore

補足:forループを使用してelementToInsertBefore. そうすれば、基準を満たす行が見つかったらすぐにbreakアウトできます。これにより、それ以上の不必要な反復を防ぐことができます (多数の行を処理するときにパフォーマンスが大幅に向上する可能性があります)。

より複雑なものが必要な場合は、言及されている jQuery プラグインをご覧ください。

ここにフィドルがあります

于 2013-08-07T12:39:59.393 に答える
0

別の解決策: http://api.jquery.com/children/ (ID は不要)ですべての tr 要素を取得し、値を確認して並べ替えます。それらが正しい順序になっている場合は、テーブルの内容を削除して、行を再挿入します。

(テーブルをクリアしてすべての行を再挿入する必要さえありません。http://api.jquery.com/insertAfter/を使用すると、適切なループ ロジックをコーディングすると、正しい 2 つの値の間に行を挿入できます)

http://api.jquery.com/attr/を使用して、DOM ノードからあらゆる種類の属性を取得できます。

于 2013-08-07T12:15:54.143 に答える
0

JQuery を使用する場合は、n no が存在する可能性があります。オプションの

テーブルソーター、JQuery データテーブルなど。

次の例を参照してください。

http://tablesorter.com/docs/

于 2013-08-07T12:23:05.403 に答える
0

val要素の属性に従ってテーブル全体をソートするにはtr、次のコードを使用できます。

orig  = 
    $.map (
        $("tr[val]")
        , function( e, idx ) {
            return "<tr val='"+$(e).attr('val')+"'>" + $(e).html() + "</tr>";
          }
    );
sorted = orig.sort();
$("tbody").replaceWith(sorted);

この方法は、挿入が一括操作である場合に実行できます。個々の要素を挿入した直後にソートされたテーブルが必要な場合は、tr要素の配列で二分検索が必要になります。

サンプルページをご覧ください。

于 2013-08-07T13:24:51.700 に答える
0

テーブルセルからデータ属性を抽出し、各列に特定の textExtraction を割り当てることができるパーサーを作成できるテーブルソーターのフォークがあります。

コード :

$(function(){

  $.tablesorter.addParser({ 
    // set a unique id 
    id: 'myParser', 
    is: function(s) { 
      // return false so this parser is not auto detected 
      return false; 
    }, 
    format: function(s, table, cell, cellIndex) { 
      // get data attributes from $(cell).attr('data-something');
      // check specific column using cellIndex
      return $(cell).attr('data-something');
    }, 
    // set type, either numeric or text 
    type: 'text' 
  }); 

  $('table').tablesorter({ 
    headers : { 
      0 : { sorter: 'myParser' }
    }
  });

});
于 2013-08-07T12:19:23.633 に答える