【jQuery】テーブル Tr 行を動的に追加・削除・並び替え・値を取得する方法

スマートフォンに対応させる方法を追記しました！（2021/2/9）

今回は、jQueryを使ってテーブルのTr行を動的に扱う方法を紹介します。

具体的には

tr（inputフォーム）を追加
tr（inputフォーム）を削除
tr を並び替える
input の値を取得する

という機能を実装します。

input フォームを動的に追加・削除する機能は、私が頂いたウェブアプリ開発の仕事でトップ3に入るほど需要がある機能でした。

ウェブアプリの開発をする場合には、絶対に知っておいて損はないです。
一度作っておけば必要な時すぐに使うことができますので、ぜひお試しください

開発環境
動画
解説
スマートフォンに対応させる方法

開発環境

テキストエディタ: Coda2
ウェブブラウザ: Google Chrome

動画

【jQuery】テーブル Tr 行を動的に追加・削除・並び替え・値を取得する方法

YouTube チャンネルはこちら

解説

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 に指定する必要があります。

行を追加する

次に「＋追加」ボタンを押したら Tr 行が追加されるようにしていきます。

6~9行目を追加します。

6行目

$('#addRow').click(function(){…});

id が addRow の要素（追加ボタン）がクリックされたら、function(){…} の処理を実行するという意味です。

8行目

$('tbody').append(html);

append() を使って tbody 内の一番最後に html を追加します。

Trを削除する

削除ボタンが押されたときの処理です。

6~8行目を追加します。

6行目

$(document).on('click', '.remove', function() {…});

class 名が remove の要素に対してクリックイベントをセットしています。

追加ボタンと削除ボタンを押した時はどちらもクリックイベントを使いますが、少しだけ書き方が異なっています。

追加：$('#addRow').click(function(){…});
削除：$(document).on('click', '.remove', function() {…});

これは、追加ボタンを押した時に追加される Tr 要素は、ページ読み込み時にはまだ作成されていないからです。

ページ読み込み時に存在しない要素に対してはクリックイベントが動作しないので、ページ読み込み後に動的に追加される要素に対しては document を使います。

7行目

$(this).parents('tr').remove();

クリックされた .remove の親要素 tr を remove（削除）します。

値を取得する

最後に、入力した値を取得してアラートで表示してみます。

6~12行目を追加します。

8~10行目

$('input[name="name"]').each(function(i, elem){
　values.push($(elem).val());
});

input の name 属性の値が name の要素に対して、each を使って各要素を取り出して values 配列に値を入れていきます。

i は何番目か、elem は要素を意味しています。好きな名前を使って大丈夫です。

11行目

alert(values.join(', '));

全ての要素の値を配列に入れたら、配列をカンマ区切りの文字列にして alert に表示します。

完成

以上で完成です！

上手く動かない場合は、サンプルコードと比較してみてください

サンプルコード

スマートフォンに対応させる方法

sortable はスマートフォンなどのタッチデバイスでは動作しないので、jQuery UI Touch Punch というライブラリを使用します。

jQuery UI Touch Punch をダウンロード

https://github.com/furf/jquery-ui-touch-punch にアクセスして、緑色の「CODE」ボタン →「Download ZIP」をクリックします。

ダウンロードした zip ファイルを開くと４つのファイルが入っていますが jquery-ui-touch-punch.js だけを使います。

jquery-ui-touch-punch.js の編集

テキストや画像を並べ替えるだけならば jquery-ui-touch-punch.js を読み込むだけで sortable を使うことができるようになりますが、今回は input を使用しています。

input をタップした時に入力できるようにするために jquery-ui-touch-punch.js を少し変更します。

jquery-ui-touch-punch.js の 38 行目あたりにある event.preventDefault(); を見つけてください。

8行目をコメントアウトして、13~17行目を追加します。

jquery-ui-touch-punch.js の読み込み

最後に index.html で jquery-ui-touch-punch.js を読み込めば完成です。*パスはお使いの環境に合わせて変更してください。

5・17行目を追加します。

【jQuery】テーブル Tr 行を動的に追加・削除・並び替え・値を取得する方法

開発環境

動画

解説

HTML