今まではデータ行の追加と削除処理を個別に説明してきましたが、 今回は table への操作処理の第4弾として table の行を追加と削除を統合する方法について説明します。
■このページの内容
■javascriptで動的に追加したHTMLでイベント処理を発火させる
今までは以下の様に jquery の click イベント生成で処理を宣言していました。
$(".btnDel").click(function(){
//削除処理
...
});
しかし、この方法では動的に class="btnDel" と属性を持ったボタンが追加されても、イベント処理は行われません。
そこで以下の様に jquery の on 関数によりクリックイベントを宣言してやれば、後から追加されたHTMLに対して イベント処理が行われる様になります。
$(document).on("click", ".btnDel", function () {
//削除処理
...
});
■table への操作として追加と削除が出来る様にした例
以下の例は table の先頭に追加処理で必要な追加行のテンプレートを設け、 その後は3行のデータを仮に宣言します。
javascript の先頭で既存行のMAXインデックスを定義して、 追加ボタン処理ではこの値をプラス１してテンプレートからの行にカスタム属性「data-index」に設定します。
削除ボタンの処理は上記の on 関数によりクリックイベントを宣言します。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery adddel</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>品名</th>
<th>数量</th>
<th>単価</th>
<th>金額</th>
<th>削除</th>
</tr>
</thead>
<tbody>
<tr id="RowTemplate" style="display: none;">
<td>なし</td>
<td>2</td>
<td>50</td>
<td>100</td>
<td><button class="btnDel">削除</button></td>
</tr>
<tr data-index="1">
<td>りんご</td>
<td>2</td>
<td>100</td>
<td>200</td>
<td><button class="btnDel">削除</button></td>
</tr>
<tr data-index="2">
<td>みかん</td>
<td>5</td>
<td>50</td>
<td>250</td>
<td><button class="btnDel">削除</button></td>
</tr>
<tr data-index="3">
<td>いちご</td>
<td>3</td>
<td>250</td>
<td>750</td>
<td><button class="btnDel">削除</button></td>
</tr>
</tbody>
</table>
<button id="btnAdd">最終行に追加</button>
<script>
//最初の行MAX-index
var MaxIndex = 3
//関数定義
$(function () {
//<button class="btnDel">のクリックイベントの関数を宣言
//$(".btnDel").click(function(){
$(document).on("click", ".btnDel", function () {
//クリック行の<tr>jqueryオブジェクト取得
var obj = $(this).parent().parent();
//<tr>のカスタム属性値を取得
var index = obj.attr("data-index");
//行削除
$('tr[data-index="' + index + '"]').remove();
});
//<button id="btnAdd">のクリックイベントの関数を宣言
$("#btnAdd").click(function(){
//テンプレート行のjqueryオブジェクト取得
var obj = $('#RowTemplate').clone();
//非表示スタイルを表示にする
obj.show();
//Indexを増やす
MaxIndex += 1;
obj.attr("data-index", MaxIndex);
obj.attr("id", ""); //[RowTemplate]のIDは要らないので
//最後尾にjqueryオブジェクト追加
$('table tbody').append(obj);
});
});
</script>
</body>
PR
コメント