忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryで table の操作する方法その4・データ行の追加と削除


今まではデータ行の追加と削除処理を個別に説明してきましたが、 今回は table への操作処理の第4弾として table の行を追加と削除を統合する方法について説明します。

■このページの内容




■javascriptで動的に追加したHTMLでイベント処理を発火させる


今までは以下の様に jqueryclick イベント生成で処理を宣言していました。

    $(".btnDel").click(function(){
        //削除処理
        ...
    });

しかし、この方法では動的に class="btnDel" と属性を持ったボタンが追加されても、イベント処理は行われません。
そこで以下の様に jqueryon 関数によりクリックイベントを宣言してやれば、後から追加されたHTMLに対して イベント処理が行われる様になります。

    $(document).on("click", ".btnDel", function () {
        //削除処理
        ...
    });


table への操作として追加と削除が出来る様にした例


以下の例は table の先頭に追加処理で必要な追加行のテンプレートを設け、 その後は3行のデータを仮に宣言します。
javascript の先頭で既存行のMAXインデックスを定義して、 追加ボタン処理ではこの値をプラス1してテンプレートからの行にカスタム属性「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

コメント

コメントを書く