0

画面（テーブル要素）に車のリストを出力するシステムを構築しています。ページは、サーバーへの HTTP 呼び出しを使用して更新を自動的に読み込みます。

すべての車には、ID、ステータス、およびいくつかの無関係なものがあります。ユーザーがページをロードすると、ステータスが「メンテナンス」と「難破」のない車が表示され、5 秒ごとに新しい JSON データがサーバーからロードされます。メンテナンスを終えた車がある場合、これをテーブルに追加する必要があります。テーブルは車のIDでソートされており、ここで問題が発生します。問題を明確にするために、少し疑似コードを書きました。

if (row_with_greater_id_exits && row_with_lower_id_exists) {
    place_row_between_firstRowWithGreaterId_and_FirstRowWithLowerId();
} else if (is_row_with_greater_id) {
    jQuery('table#cars tbody').append(generatedHtml);
} else if (is_row_with_lower_id) {
    jQuery('table#cars tbody').prepend(generatedHtml);
}

問題は、ID が大きい最初の行または ID が小さい最初の行を見つける方法がわからないことです。一部の車は大破してステータスが大破しているため、ID が常に成功するとは限りません。

ここにいる誰かが同様の問題を抱えていて、解決策に向かう途中で助けてくれることを願っています.

よろしくお願いします！

4

2 に答える 2

2

行をループして、ID を比較する必要があります。ループ内で新しい行の ID が現在の行よりも小さい場合は、新しい行を現在の行の前に挿入し、ループを中断します。

rows.each(function(i, el) {
    if (+newrow.id < +el.id) {
        $(el).before(newrow);
        return false;
    }
})
if (!newrow.parentNode)
    rows.parent().append(newrow);

このコードはrows、すべての行のコレクションを持つ jQuery オブジェクトでありnewrow、新しい行を表す DOM 要素であると想定しています。

また、ID は単純な数字であると想定しています。数値 ID は HTML5 でのみ有効であることに注意してください。

個人的には、これにはネイティブ API を使用します。

var tbody = document.querySelector("tbody");

tbody.insertBefore(newrow, [].reduce.call(tbody.rows, function(bef, el) {
    return bef || +newrow.id > +el.id ? bef : el;
}, null));

をテストする必要はありませんisFirstLoad。tbodyが空の場合でも、機能します。.reduce()ただし、古いブラウザーには shimが必要です。

于 2013-02-05T20:37:21.323 に答える
0

私はこれを持っています： id="car-1" data-id="1"

data属性がtr要素にあると仮定します。行内のセルにある場合は、明らかに以下を適応させることができます。

テーブルをループして各行の ID をチェックし、新しい行よりも大きな ID を持つ最初の行の直前に新しい行を挿入します。

// assume newId is the new ID, somehow set from your JSON

var rowInserted = false;
jQuery('#invoices-outstanding tbody tr').each(function() {
   var $row = $(this);
   if (+$row.attr("data-id") > newId) {
      $row.before(generatedHtml);
      rowInserted = true;
      // break out of each loop
      return false;
   }
});
if (!rowInserted)
   jQuery('#invoices-outstanding tbody').append(generatedHtml);
于 2013-02-05T20:42:36.133 に答える