テーブルに行を挿入する

StackOverflow https://stackoverflow.com/questions/604281

質問

IEのテーブルにX行を挿入するのに最適なプレーンJavaScriptの方法は何ですか。

テーブルhtmlは次のようになります。

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

する必要があるのは、古いボディをドロップし、1000行の新しいボディを挿入することです。 JavaScript文字列変数として1000行があります。

問題は、IEのテーブルにinnerHTML関数がないことです。私はそれを行うために多くのハックを見てきましたが、私はあなたの最高のものを見てみたいです。

注：jqueryまたは他のフレームワークを使用してもカウントされません。

役に立ちましたか？

解決

howにIEのinnerHTML=を実装した人による素晴らしい記事があります。 IEにtbody.innerHTML="<tr>..." を実行してもらいました：

  

最初は、IEは   再描画を実行できる   innerHTMLで変更されたテーブル、ただし   それから私は自分が   この制限に責任があります！

ちなみに、彼が使用するトリックは、基本的にすべてのフレームワークがtable / tbody要素に対してそれを行う方法です。

編集：@mkoryak、あなたのコメントは、あなたは想像力がゼロであり、答えに値しないことを教えてくれます。とにかくあなたをユーモアで話します。あなたのポイント：

<！> gt;彼は私が必要なものを挿入していません

何？彼は文字列として持つ行をdocument.createElement('div')要素に挿入しています。

<！> gt;彼はまた、余分な隠し要素を使用しています

この要素のポイントは、IEが必要とするすべてが<！> quot; context <！> quot;であることを示すことでした。代わりにオンザフライで作成された要素を使用できます（jQuery.clean()）。

<！> gt;また、記事は古い

二度とあなたを助けません;）

しかし、真剣に、他の人がどのようにそれを実装しているかを見たいなら、 Element._insertionTranslations 、またはプロトタイプの <=> 。

他のヒント

jQueryが行うように実行します。その周りに<table>と</table>を追加し、ドキュメントに挿入し、目的のノードを目的の場所に移動して、temp要素を捨てます。

コードは最終的に次のようになりました：

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

事前に存在する必要があるもの：idが 'bodyId'の本体を持つテーブル。 IEはその場でHTMLに挿入されたスクリプトを評価しないため、$ bodyはグローバル変数（または関数にクロージャーがあります）であり、そこにもjqueryが少しあります。

私は同じ問題を抱えており（他の多くの人々もそうであるように）、多くのことを試した後、ここで仕事をしました。

同じ方法で、document.createelement（ 'tr'）でtrを作成してから、tdを作成する必要があります。 appendchild tdをtrに、appendchild trをtbody（テーブルではない）に追加すると、作成したtdをinnerhtmlでき、動作します。 これは私が使用していたie8でした。基本的に、テーブル構造はcreateelementで作成する必要がありますが、残りはinnerHTMLで作成できます。私はIE8デバッガでこれを監視していて、それを追加すると言います（tr.innerhtml = <！> quot; blah <！> quot;を実行した場合）、エラーを表示しませんが、表示されませんhtml domビューは非常に壊れたテーブルを表示しました（tdは表示されませんでしたが、/ tdは表示されました）

だからついにcreateelement呼び出しでtrとtdを実行したとき、見た目が正しいdomが作成され、ページが正しく描画されました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top