0

MVC アプリがあり、ページの 1 つが ajax を介してコントローラー メソッドを呼び出し、多数のテーブル行を持つ部分ビューを返します。テーブル全体が返されるのではなく、テーブルの行だけが返されることに注意してください。

これらのテーブル行をテーブルの特定の位置に追加する必要があります。行を追加する必要があるテーブルへの参照があります（または、新しい行が追加された後に参照された行が削除されるため、実際には前に）。jQuery を使用すると、これはとてつもなく簡単になります。

$(newRows).insertAfter(tr);
tr.remove();

問題は、newRows html が非常に大きくなる可能性があり、jQuery を介してそれらを挿入するのにかなりの時間がかかる場合があることです。jQuery を使用せずに純粋な JavaScript を介して行を挿入すると、はるかに高速になります。

私の問題は、指定されたテーブル行の前後に新しい行を挿入する方法を一生理解できないことです。insertBefore、insertAfter、および appendTo メソッドを試しましたが、問題は newRows 変数が実際の DOM ノードではなく単なる html 文字列であることです。テーブル行の html 文字列を DOM 要素に変換することなく、参照テーブル行の前後に html を挿入する方法はありますか?

4

3 に答える 3

0

文字列を変換するためにできることは、空の div を作成し、文字列を innerHTML として設定することです。これらは DOM に変換され、div の childNodes を介してアクセスできるようになります。

次に、appendChild() を使用して、ドキュメント フラグメントを使用して、その中にすべての DOM 要素を挿入できます。

それが完了したら、ドキュメントフラグメントを挿入するだけなので、実際のドキュメントに複数挿入するのではなく、1 回だけ挿入します。

ドキュメントフラグメントに関する良い作品http://ejohn.org/blog/dom-documentfragments/

于 2012-04-27T17:31:29.540 に答える
0

オブジェクトの配列(json)を返し、この配列を使用してJSを介して新しい行を作成し、必要な場所に追加することができます。

于 2012-04-27T17:24:55.260 に答える
0

innerHTML を使用できますが、コンテンツを完全に上書きするのではなく、行を追加するだけなので、少し考えてください。innerHTML を使用すると、常に DOM 操作より高速になります。おそらく、行を新しいテーブルに配置することはできますが、テーブルを既存のテーブルの下に配置して、その一部のように見せることはできますか? 個人的には、jquery の速度に興味があります。jquery は通常、問題の原因ではないことがわかりました。

于 2012-04-27T17:24:58.757 に答える