既存の行の後に表の行を挿入する

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

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

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

問題はnewRowsのHTMLは非常に非常に大きくなる可能性があることだと私はかなりの時間がかかることがjQueryを介して、それらを挿入する発見しました。純粋なjavascriptだけで、jQueryを使わずに行を挿入する方がはるかに高速です。

私の人生では、与えられたテーブル行の前後に新しい行を挿入する方法がわかりません。 insertBefore、insertAfter、およびappendToメソッドを試しましたが、問題はnewRows変数が実際のDOMノードではなくHTML文字列であることです。テーブル行のhtml文字列をDOM要素に変換せずに、参照テーブル行の前後にhtmlを挿入する方法はありますか？

出典

2012-04-27 Nick Olsen

あなたはDOMが文字列でない問題 – chrismarx

のjsfiddle例を提供することができます。なぜあなたの行を正しく作成しないのですか？ –

「適切に」は相対的なものです。それらは適切に作成されていますが、データベースのデータでいっぱいにする必要があります。これはASP.NET MVCアプリケーションであり、作成する多くのJavaScriptやクライアントサイドのロジックにかかる「適切な」すべてのテーブル行を含む部分ビューを返すために使用しています。 –

オブジェクトの配列（json）を返して、この配列を使用してJSを使用して新しい行を作成し、必要な場所にそれらを追加できます。

出典

2012-04-27 17:24:55

これは可能ですが、HTML行を生成するのにかなりのロジックが必要で、JavaScriptのロジックを複製するのは面倒です。 –

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

出典

2012-04-27 17:24:58 chrismarx

ドキュメントの断片の提案も良いです、私が提案したinnerHTMLのアプローチを使用しているなら、 – chrismarx

文字列を変換するためにできることは、空のdiv文字列をinnerHTMLとして設定します。それらはDOMに変換され、divのchildNodes経由でアクセス可能になります。それはあなたがちょうどあなたのドキュメントフラグメントを挿入完了だとき

次に、あなたは、実際のドキュメント上で、のappendChild（）

を使用して、その中のすべてのDOM要素を挿入する代わりに、複数の1のように一つだけの挿入を文書フラグメントを使用することができます。

ドキュメントフラグメントの良い作品はhttp://ejohn.org/blog/dom-documentfragments/

出典

2012-04-27 17:31:29 GillesC

既存の行の後に表の行を挿入する

答えて

関連する問題