【jQuery】テーブルに行を追加する方法

jQueryでは簡単に動的な要素を追加することができます。

今回はテーブル行の追加をjQueryで行ってみたいと思います。

jQueryで行を追加する

まず、JavaScriptのファイルに必要な処理を書きます。

いろいろな方法があるのですが、とりあえず今回は保守性も高く、jQueryをよく知らなくてもぱっと見で理解できるhtmlの変数を使用して追加してみたいと思います。

この方式はJavaScriptでid指定して「.innerHTML」で追加する。

という方式と同じ構造ですから、見慣れた方も多いのではと思います。

構造は簡単で、html変数に見られた構造のhtml文を記入して、最後に「.append()」で指定したテーブルに追加するだけです。

また、この書き方で「onClick」などのイベントハンドラを直書きで追加しても動きますし、ボタンやセレクトボックスもちゃんと表示されます（もちろん、フォームで値を飛ばしてもちゃんと処理されます）

この「.append()」処理のよいところは、再描画を行うので「.innerHTML」や「.push().join()」で追加できない場合を排除できる点にあります。

（特に、IEでは「.innerHTML」でテーブル行追加できない場合がある）また、「行は追加できたが、行内（<td></td>）の中に配置した「onClick()」などのイベントハンドラが発火しない(´・ω・｀)」などのトラブルも極力少なくできますのでおすすめです。

不確定要素を排除できることは、自分で確認する作業と再検証のコストを減らせますから、多少重くてもこちらを使用したいですね。

前述のとおり「.append()」処理をするたびに再描画を行うので、場合によっては処理が重くなります。

（最近のPCは処理速度が速いので特に気にする必要は無いと思いますが）「ページを開いた際に、「.append()」で機能満載のテーブル行を1,000行くらい追加する」などの処理を行うと、「.innerHTML」や「.push().join()」で追加する方式と体感でかなり違いを感じます。

またページ遷移をしなくても、何度も「.append()」処理をiframe内で処理しては閉じ、を繰り返していると、極端に動作が重くなったりするので注意が必要です。