jQueryによるフォームテーブル行の追加・削除

業務系のシステムではテーブル表示というものが多く見られます。

こんな感じ

で、追加ボタンをクリックしたら入力行を増やして欲しいなんて要求もあります。
今回はそんな要求に答える処理を行ってみましょう

行の追加１

テーブルの最終行を複製して追加してみます。

複製には clone メソッドを使うのが便利です。

clone を使うとフォームに付与しているイベントなども複製してくれます。

サンプル

html

<input id="btnAdd1" type="button" value="行追加" />
<table id="tblForm1">
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>期限</th>
</tr>
</thead>
<tbody>
<tr>
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
</tr>
<tr>
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
</tr>
</tbody>
</table>

jQuery

<script>
jQuery(function($) {
 $("#btnAdd1").on("click", function() {
  // テーブルの最終行をクローンしてテーブルの最後に追加する
  $("#tblForm1 tbody tr:last-child").clone(true).appendTo("#tblForm1 tbody");
 });
});
</script>

かなりシンプルですが、これだけで行は追加されます。

ただし、「最終行を複製して追加」というものなので、最終行に何らかの値が入っているとそのまま追加された行にも値が入ってますので、不要であれば下記のように値をクリアするという処理を入れてください。

<script>
jQuery(function($) {
 $("#btnAdd1").on("click", function() {
  // テーブルの最終行をクローンしてテーブルの最後に追加する
  $("#tblForm1 tbody tr:last-child").clone(true).appendTo("#tblForm1 tbody");

  // 追加した行の値をクリアする
  $("#tblForm1 tbody tr:last-child input").val("");
 });
});
</script>

行の追加２

行の追加１ではテーブルの最終行を複製して追加してみました。

最初から１行以上が必ず表示されている場合はいいのですが、１行も無い場合はどうすればいいでしょうか

こんな感じ

複製しようにも複製元が存在しない

そんな場合は、複製元の行を非表示にしておいて複製後に表示させるという方法をとります。

サンプル

html

最初の tr タグに style=”display: none;” を設定して非表示にしてこの行を複製元としています。

<input id="btnAdd2" type="button" value="行追加" />
<table id="tblForm2">
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>期限</th>
</tr>
</thead>
<tbody>
<tr style="display: none;">
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
</tr>
</tbody>
</table>

jQuery

<script>
jQuery(function($) {
 $("#btnAdd2").on("click", function() {
  // 最終行ではなく、非表示になっている最初の行なので first-child になっている
  $("#tblForm2 tbody tr:first-child").clone(true).appendTo("#tblForm2 tbody");

  // 複製後に表示させる
  $("#tblForm2 tbody tr:last-child").css("display", "table-row");
 });
});
</script>

行の削除

これも追加と同じく「削除」のボタンをクリックされたら削除するようにします

クリックされたら最初の行を削除する、最終行を削除するなどの手法もありますが、普通に考えて最も実用的なものは任意の行を削除できるというものでしょう

今回は、各行に存在する「削除」ボタンをクリックしたら、その行を削除するというものにします。

サンプル

html

<input id="btnAdd3" type="button" value="行追加" />
<table id="tblForm3">
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>期限</th>
<th></th>
</tr>
</thead>
<tbody>
<tr style="display: none;">
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
<td><input class="btnDelete" type="button" value="削除" /></td>
</tr>
</tbody>
</table>

jQuery

<script>
jQuery(function($) {
 $("#btnAdd2").on("click", function() {
  // 最終行ではなく、非表示になっている最初の行なので first-child になっている
  $("#tblForm2 tbody tr:first-child").clone(true).appendTo("#tblForm2 tbody");

  // 複製後に表示させる
  $("#tblForm2 tbody tr:last-child").css("display", "table-row");

 // 行削除
 $(".btnDelete").on("click", function() {
  $(this).parent().parent().remove();
 });
 });
});
</script>

まとめ

以前は「削除」ボタンがクリックされた時のイベントなどは画面が表示された時に存在していた削除ボタンに対しては動きましたが、「行追加」で追加された行の「削除」ボタンにはイベントが付与されておらず、手動でイベントを追加してあげる必要がありました。

画面の描画が終わった後に追加されたものに対してのイベントは追加してあげるという処理が必要だったのです。

clone メソッドによりイベントも追加してくれるようになったので、このような行追加が容易に行えるようになりました。