jQueryでは簡単に動的な要素を追加することができます。
今回はテーブル行の追加をjQueryで行ってみたいと思います。
jQueryで行を追加する
まず、JavaScriptのファイルに必要な処理を書きます。
いろいろな方法があるのですが、とりあえず今回は保守性も高く、jQueryをよく知らなくてもぱっと見で理解できるhtmlの変数を使用して追加してみたいと思います。
この方式はJavaScriptでid指定して「.innerHTML」で追加する。
という方式と同じ構造ですから、見慣れた方も多いのではと思います。
構造は簡単で、html変数に見られた構造のhtml文を記入して、最後に「.append()」で指定したテーブルに追加するだけです。
また、この書き方で「onClick」などのイベントハンドラを直書きで追加しても動きますし、ボタンやセレクトボックスもちゃんと表示されます(もちろん、フォームで値を飛ばしてもちゃんと処理されます)
th | td |
---|---|
th | td |
th | td |
メリットについて
この「.append()」処理のよいところは、再描画を行うので「.innerHTML」や「.push().join()」で追加できない場合を排除できる点にあります。
(特に、IEでは「.innerHTML」でテーブル行追加できない場合がある) また、「行は追加できたが、行内(<td></td>)の中に配置した「onClick()」などのイベントハンドラが発火しない(´・ω・`)」などのトラブルも極力少なくできますのでおすすめです。
不確定要素を排除できることは、自分で確認する作業と再検証のコストを減らせますから、多少重くてもこちらを使用したいですね。
デメリットについて
前述のとおり「.append()」処理をするたびに再描画を行うので、場合によっては処理が重くなります。
(最近のPCは処理速度が速いので特に気にする必要は無いと思いますが) 「ページを開いた際に、「.append()」で機能満載のテーブル行を1,000行くらい追加する」などの処理を行うと、「.innerHTML」や「.push().join()」で追加する方式と体感でかなり違いを感じます。
またページ遷移をしなくても、何度も「.append()」処理をiframe内で処理しては閉じ、を繰り返していると、極端に動作が重くなったりするので注意が必要です。
コメントを残す