javascript remove jQuery を使用してその場で HTML テーブルを構築する




jquery row remove (7)

以下は、(サーバーから受け取ったJSONデータを使用して)オンザフライでHTMLテーブルを構築するために使用するコードです。

データがロードされている間、私はアニメーションのpleasewait(.gif)グラフィックを表示します。 ただし、JavaScript関数がテーブルを構築している間にグラフィックがフリーズします。 最初は、これを実現させて(テーブルを表示する)うれしく思っていましたが、効率を上げる必要があります。 少なくとも私はアニメーショングラフィックをフリーズするのを止める必要があります。 私は静的な "Loading"ディスプレイに行くことができますが、私はむしろこのメソッドを動作させるでしょう。

私のpleasewait表示のための提案? そして効率は? おそらくテーブルを作る良い方法は? またはテーブルではなく、ディスプレイのような他の「テーブル」

var t = eval( "(" + request + ")" ) ;
var myTable = '' ;
myTable += '<table id="myTable" cellspacing=0 cellpadding=2 border=1>' ;
myTable +=  "<thead>" ;
myTable +=   "<tr>";
for (var i = 0; i < t.hdrs.length; i++) {
    myTable +=    "<th>"     + header +       "</th>";
}
myTable +=   "</tr>" ;
myTable +=  "</thead>" ;
myTable +=  "<tbody>" ;

for (var i = 0; i < t.data.length; i++) {
    myTable +=    '<tr>';
    for (var j = 0; j < t.hdrs.length; j++) {
        myTable += '<td>';
        if (t.data[i][t.hdrs[j]] == "") {
            myTable += "&nbsp;" ;
        }
        else {
            myTable += t.data[i][t.hdrs[j]] ;
        }
        myTable += "</td>";
    }
    myTable +=    "</tr>";
}
myTable +=  "</tbody>" ;
myTable += "</table>" ;

$("#result").append(myTable) ;
$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;

テーブルをDOMにビットごとに挿入することができます。 正直なところ、これがあなたの問題に役立つかどうかは完全にはわかりませんが、試してみる価値はあります。 私はこれを大雑把にやってみましょう(テストされていないコードはもう少し精緻化できるでしょう):

$("#result").append('<table id="myTable" cellspacing=0 cellpadding=2 border=1></table>');
$('#myTable').append('<thead><tr></tr></thead>');
$('#myTable').append('<tbody></tbody>');

for (var i = 0; i < t.hdrs.length; i++) { 
    $('#myTable thead tr').append('<th>'+header+'</th>');
}

for (var i = 0; i < t.data.length; i++) { 
 myTr =    '<tr>';
 for (var j = 0; j < t.hdrs.length; j++) { 
  myTr += '<td>';
  if (t.data[i][t.hdrs[j]] == "") { 
   myTr += "&nbsp;" ; 
  }
  else { 
   myTr += t.data[i][t.hdrs[j]] ; 
  }
  myTr += "</td>";
  }
 myTr +=    "</tr>";
 $('#myTable tbody').append(myTr);
}

$("#PleaseWaitGraphic").addClass("hide");
$(".rslt").removeClass("hide") ;

WebでJavaScriptとStringBuilderを検索します。 JavaScript文字列ビルダを作成したら、すべての連結で.appendメソッドを使用するようにしてください。 つまり、あなたは+連結を望んでいません。 その後、JavaScriptとreplacehtmlを検索します。 innerHTML代わりにこの関数を使用します。


まず初心者にとっては、 飛行機をチェックしてください。それは変種です。彼らはいつも助けになります。 おそらくもっと文脈を与えることができますか? これがonloadになく、ページに貼り付けられているだけであれば、$(function(){/ * code * /})にすべてをラップするだけで、おそらく問題のあるものはすべて消去されます。 インラインJSはすぐに実行されます。つまり、テーブルのループです。 onloadは事象であり、基本的に「分離」されています。


あなたがやっていることは、文字列を作成し、それを挿入するとすぐにすべて解析することです。 実際のテーブル要素(つまり$("<table>") )を作成し、次に各行を順番に追加するのはどうでしょうか? 実際にページに挿入するときには、DOMノードはすべて構築されているので、大きなヒットにならないようにしてください。


innerHTMLを使用することは、innerHTMLを使用しますが、入力に対して多くの処理を行うjQueryのHTML-to-DOM-ifierを使用するよりもはるかに高速です。

JavaScriptオブジェクトからテーブルやその他の繰り返しデータ構造を素早く構築する方法として、 chain.jsをチェックすることをお勧めします。 これはjQuery用の軽量でスマートなデータバインディングプラグインです。


基本的にループを設定して、頻繁に他のスレッドに割り当てるようにしたいのです。 ここでは、UIをフリーズすることなくCPU集約型操作を実行するトピックについて、 この記事のコード例をいくつか示します。

function doSomething (progressFn [, additional arguments]) {
    // Initialize a few things here...
    (function () {
        // Do a little bit of work here...
        if (continuation condition) {
            // Inform the application of the progress
            progressFn(value, total);
            // Process next chunk
            setTimeout(arguments.callee, 0);
        }
    })();
}

あなたのスクリプトでHTMLの制作を簡素化する限り、jQueryを使用しているなら、あなたは私のSimple Templatesプラグインを試してみるかもしれません。 それはあなたがしなければならない連結の数を大幅に削減することによってプロセスを整理します。 最近のリファクタリングを行ってかなりスピードが上がったのですが、それはかなりうまくいきます。 ここに例があります(あなたのためにすべての仕事をしないで!):

var t = eval('(' + request + ')') ;
var templates = {
    tr : '<tr>#{row}</tr>',
    th : '<th>#{header}</th>',
    td : '<td>#{cell}</td>'
};
var table = '<table><thead><tr>';
$.each(t.hdrs, function (key, val) {
    table += $.tmpl(templates.th, {header: val});
});
...

私の経験は、2つの離散的な遅延があるということでした。 1つは、これらの文字列をすべて連結することです。 もう1つは、ブラウザが文字列を実際にレンダリングしようとするときです。 通常、UIのフリーズに最も困っているのはIEです。なぜなら、JavaScriptを実行するにはかなり遅いからです。 これはIE8で良くなるはずです。

私があなたのケースで提案しているのは、操作をステップに分けることです。 100行のテーブルについては、最初に有効な10行のテーブルを生成します。 次にそれを画面に出力し、setTimeoutを使用してコントロールをブラウザに戻し、UIがブロックを停止します。 setTimeoutが戻ったら、次の10行などを行います。

DOMを使用してテーブルを作成することは確かに「クリーン」です。 しかし、パフォーマンス面では犠牲を払う必要があります。 このテーマに関する優れたquirksmodeの記事を参照してください。この記事では、自分で実行できるベンチマークがあります。

簡単に言えば、innerHTMLは、現代のJSエンジンでさえ、DOMよりはるかに高速です。





jquery