忍者ブログ

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

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

  • 2020/03/09
JavaScript jQueryで table の操作する方法その３・データ削除


今回は table への操作処理の第3弾として table の行を削除する方法について説明します。

■このページの内容




■table 先頭行を eq() でIndexを指定し削除する


table の先頭行を指定するには tbody tr のオブジェクトに対しての eq(0) を行い削除メソッド remove を使用します。

以下のソースでは「id="btn1"」のボタンクリックイベントで先頭行の削除を行います。 尚、3回のクリックで table の全ての行は削除されますので、ヘッダのみが残ります。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq4</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>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>りんご</td>
        <td>2</td>
        <td>100</td>
        <td>200</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>5</td>
        <td>50</td>
        <td>250</td>
    </tr>
    <tr>
        <td>いちご</td>
        <td>3</td>
        <td>250</td>
        <td>750</td>
    </tr>
  </tbody>
</table>
<button id="btn1">先頭行を削除</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //先頭行を削除
        $('table tbody tr').eq(0).remove();
    });
});
</script>
</body>


以下で動作の様子が分かります。

品名数量単価金額
りんご 2 100 200
みかん 5 50 250
いちご 3 250 750



尚、セレクタの指定で tr の中の先頭（tr:first-child)、及び最終行（tr:last-child)を指定することで削除できます。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery del2</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>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>りんご</td>
        <td>2</td>
        <td>100</td>
        <td>200</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>5</td>
        <td>50</td>
        <td>250</td>
    </tr>
    <tr>
        <td>いちご</td>
        <td>3</td>
        <td>250</td>
        <td>750</td>
    </tr>
  </tbody>
</table>
<button id="btn1">先頭行を削除</button>
<button id="btn2">最終行を削除</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //先頭行を削除
        $('table tbody tr:first-child').remove();
    });
    //<button id="btn2">のクリックイベントの関数を宣言
    $("#btn2").click(function(){
        //最終行を削除
        $('table tbody tr:last-child').remove();
    });
});
</script>
</body>



■tr にカスタム属性を宣言し、それを参照して行を削除する

HTML5からはHTMLのタグに独自の属性を付加することができます。 この属性のことを カスタム属性 と言いまして class属性 の拡張版の様な感じで使用することができます。

カスタム属性の記述は以下の様に「data-」で始まり任意の名前を宣言できます。 尚、名前は文字、数字、ハイフン（-）、ドット（.）、アンダースコア（_）だけで、大文字は使えません。

...

このカスタム属性は javascript 及び CSS から参照ができます。

カスタム属性を使用して table の指定の行を削除する例を以下に示します。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery del custom-attr</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>
    </tr>
  </thead>
  <tbody>
    <tr data-index="1">
        <td>りんご</td>
        <td>2</td>
        <td>100</td>
        <td>200</td>
    </tr>
    <tr data-index="2">
        <td>みかん</td>
        <td>5</td>
        <td>50</td>
        <td>250</td>
    </tr>
    <tr data-index="3">
        <td>いちご</td>
        <td>3</td>
        <td>250</td>
        <td>750</td>
    </tr>
  </tbody>
</table>
<button id="btn1">data-index="1"の行を削除</button>
<button id="btn2">data-index="3"の行を削除</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //先頭行を削除
        $('tr[data-index="1"]').remove();
    });
    //<button id="btn2">のクリックイベントの関数を宣言
    $("#btn2").click(function(){
        //最終行を削除
        $('tr[data-index="3"]').remove();
    });
});
</script>
</body>

以下で動作の様子が分かります。

品名数量単価金額
りんご 2 100 200
みかん 5 50 250
いちご 3 250 750



■tr の各行に削除ボタンを設置し、自分自身の行を削除する


tr の最後のカラムに削除ボタンを設置し、そのボタンをクリックすることで自分自身を削除する方法を示します。
今回も上記と同様カスタム属性を使用して行のIndexを設定し、処理に利用します。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery del button</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 data-index="1">
        <td>りんご</td>
        <td>2</td>
        <td>100</td>
        <td>200</td>
        <td><button onclick="deleteRow(1);">削除</button></td>
    </tr>
    <tr data-index="2">
        <td>みかん</td>
        <td>5</td>
        <td>50</td>
        <td>250</td>
        <td><button onclick="deleteRow(2);">削除</button></td>
    </tr>
    <tr data-index="3">
        <td>いちご</td>
        <td>3</td>
        <td>250</td>
        <td>750</td>
        <td><button onclick="deleteRow(3);">削除</button></td>
    </tr>
  </tbody>
</table>
<script>
function deleteRow(index) {
    //行を削除
    $('tr[data-index="' + index + '"]').remove();
}
</script>
</body>

各行の削除ボタンにクリック時イベントとして行削除処理を宣言しています。

品名数量単価金額削除
りんご 2 100 200
みかん 5 50 250
いちご 3 250 750


各行の削除ボタンにクラス名を設定し、クラスでのクリック時イベント関数を宣言すれば以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery del button2</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 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>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $(".btnDel").click(function(){
        //クリック行の<tr>jqueryオブジェクト取得
        var obj = $(this).parent().parent();
        //<tr>のカスタム属性値を取得
        var index = obj.attr("data-index");
        //行削除
        $('tr[data-index="' + index + '"]').remove();
    });
});
</script>
</body>











PR
  • JavaScript
  • 0CM

コメント

コメントを書く