今回は、jQueryを使ってテーブルのTr行を動的に扱う方法を紹介します。
具体的には
- tr（inputフォーム）を追加
- tr（inputフォーム）を削除
- trを並び替える
- inputの値を取得する
という機能を実装します。
inputフォームを動的に追加・削除する機能は、私が頂いたウェブアプリ開発の仕事でトップ３に入るほど需要がある機能でした。
ウェブアプリの開発をする場合には、絶対に知っておいて損はないです。
一度作っておけば必要な時すぐに使うことができますので、ぜひお試しください🙂
開発環境
テキストエディタ: Coda2
ウェブブラウザ: Google Chrome
動画
HTML
「index.html」というファイルを新しく作成し、以下のようにHTMLを書きます。（ファイル名は何でも大丈夫です。）
このままだと少しわかりにくいので、サイズや色を変更して使いやすくしてみましょう。
CSS
6~41行目を追加します。
このようになりましたか？
jQuery
jQueryを読み込む
jQueryを読み込む方法は２つあります。
- ファイルをダウンロードする
- CDNを利用する
今回はダウンロードはせずに、CDN（コンテンツデリバリネットワーク）を利用します。
CDNを使うとインターネット経由でファイルを読み込むことができるので、ダウンロード不要で簡単に使うことができます。
CDNを提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。
「Google Hosted Libraries」で検索、または以下のリンクにアクセスしてください。
リンク：Google Hosted Libraries
「jQuery」「jQuery UI」を使います。
赤枠の部分を、6, 17, 18行目に追加します。
jQueryのコードを書く場所
3~7行目を追加します。
ページの読み込みが完了してから実行されるように、$(function(){…});を書きます。
並び替え
まずは一番簡単な並び替え機能をつけてみます。必要なのはたった１行です。
4行目を追加します。
テーブル行に対してsortableを使う場合は「tbodyに指定する」必要があります。
行を追加する
次に「＋追加」ボタンを押したら行が追加されるようにしていきます。
6~9行目を追加します。
追加ボタン： <button id="addRow">+ 追加</button>
jQuery ： $('#addRow').click(function(){...});idがaddRowの要素がクリックされたら、function(){…}の処理を実行するという意味です。
$('tbody').append(html);append()を使って、tbody内の一番最後にhtmlを追加します。
Trを削除する
削除ボタンが押されたときの処理です。
6~8行目を追加します。
$(document).on('click', '.remove', function() {});class名がremoveの要素に対してクリックイベントをセットしています。
追加ボタンと同じ処理ですが、少し書き方が違います。
$('#addRow').click(function(){...});
$(document).on('click', '.remove', function() {...});
追加ボタンを押した時に追加されるTr要素は、ページが読み込まれた時にはまだ作成されていません。
作成されていない要素に対してはクリックイベントが動作しないので、ページ読み込み後に動的に追加される要素に対してはdocumentを使います。
$(this).parents('tr').remove();クリックされた .remove の親要素 tr を remove（削除）します。
値を取得する
最後に、入力した値を取得してアラートで表示してみます。
6~12行目を追加します。
$('input[name="name"]').each(function(i, elem){
values.push($(elem).val());
});inputのname属性がnameの要素に対して、eachを使って各要素を取り出し、values配列に値を入れていきます。
iは何番目か、elemは要素を意味しています。好きな名前を使って大丈夫です。
alert(values.join(', '));全ての要素の値を配列に入れたら、配列をカンマ区切りの文字列にして、alertに表示します。
これで全て完成です！
上手く動かない場合は、サンプルコードと比較してみてください🙂
サンプルコード
