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

配列及び連想配列にはそれぞれキーを持っていて、対応する値を管理しています。
そのキーの一覧を取得するためには標準オブジェクトである Object の Object.keys() メソッドを使用します。
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。 それでは、以下にの例を示します。

■配列のキー一覧取得（Object.keys）

    var arrTest;
    var arrKeys;

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrKeys = Object.keys(arrTest);
    console.log(arrKeys);

結果をコンソールに表示していますので、ブラウザの開発環境を開いてコンソール出力を表示させます。 ブラウザにより少し違いがありますが、以下の様な結果が表示されるはずです。

Array(3) [ "0", "1", "2" ]
Array(3) [ "0", "1", "2" ]
Array(3) [ "5", "10", "100" ]
Array(5) [ "20", "100", "aaa", "cc", "bb" ]

ここで注意するのは key が昇順でソートされて返されるところです。 数値と文字列が混在した場合には、数値はソートされ、文字列は発生した順番の様です。

キーの一覧取得には Object.keys() メソッドを使用するのですが、 キーの示す値の取得にはそれに対応する Object.values() メソッドを使用することになります。

上のソースを少し変更したものを以下に示します。

■配列の値一覧取得（Object.values）

    var arrTest;
    var arrVals;

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

結果は以下の通りです。 先ほどのキーの出力順番通りキーに対応する値が出力されています。

Array(3) [ "a", "b", "c" ]
Array(3) [ "abcdefg", 123, true ]
Array(3) [ 123, true, "abcdefg" ]
Array(5) [ 45, 123, "abcdefg", "10", true ]

この Object.values() メソッドですが、 FireFox 、Chrome 、Edge などは対応していますが IE(Internet Explorer) は対応していません。 これを実行すると「オブジェクトは 'values' プロパティまたはメソッドをサポートしていません。」のエラーが表示されるはずです。
IE を対象外とはまだできないと思いますので、Object.values() メソッドを作ってみたいと思います。

■ IE(Internet Explorer) で Object.values() メソッドをエミュレート

function EmulateObjectValues() {
    if(!Object.values) {
        //  「Object.values」の定義が存在しない場合、関数生成
        Object.values = function(obj) {
            //  戻り値の配列
            var arr = new Array();
            //  [obj]の中のキー値の一覧
            for(var key in obj) {
                //  [obj]の中の値を配列に設定
                arr.push(obj[key]);
            }
            //  配列を戻す
            return (arr);
        }
    }
}

この関数は Object.values() メソッドが存在しない場合にメソッドの関数を生成する様にしています。 この関数を Object.values() メソッドを使用する前にコールする様にします。 上のソースにこの関数をコールする様にした例を示します。

■Object.values() メソッドのエミュレート関数をコールする

    var arrTest;
    var arrVals;

    //  エミュレート関数生成をコール
    EmulateObjectValues();

    //  単純な配列
    arrTest = ['a', 'b', 'c'];
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  オブジェクトのような配列
    arrTest = { 0: 'abcdefg', 1: 123, 2: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列
    arrTest = { 100: 'abcdefg',  5: 123, 10: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrVals = Object.values(arrTest);
    console.log(arrVals);

これを実行すると上の方の実行結果と同じになるはずです。

Object.values() に関連したメソッドとして Object.entries() が有りますが、 このメソッドも IE(Internet Explorer) は対応していませんので、これのエミュレート関数を作成してみます。

■Object.entries() メソッドのエミュレート関数

function EmulateObjectEntries() {
    if(!Object.entries) {
        //  「Object.entries」の定義が存在しない場合、関数生成
        Object.entries = function(obj) {
            //  戻り値の配列
            var arr = new Array();
            //  [obj]の中のキー値の一覧
            for(var key in obj) {
                //  子のオブジェクトに設定
                var objSub = {};
                objSub[key] = obj[key];
                arr.push(objSub);
            }
            //  配列を戻す
            return (arr);
        }
    }
}

これを実行するソースは以下の様になります。

    var arrTest;
    var arrEnts;

    //  エミュレート関数生成をコール
    EmulateObjectEntries();

    //  key定義がランダムな配列２
    arrTest = { aaa: 'abcdefg',  100: 123, 20: 45, cc:'10', bb: true };
    arrEnts = Object.entries(arrTest);
    console.log(arrEnts);

以下に IE 及び FireFox での実行結果（コンソール画面）の表示を示します。

■Object.entries() IEでの実行結果

■Object.entries() FireFoxでの実行結果

数値データを表示するために各種の書式の文字列に変換することはよくあります。 各データ型が持つ ToString メソッドを使えば以下の様な感じでできます。

Console.WriteLine((12345).ToString("C"))            '¥12,345  と表示
Console.WriteLine((12345).ToString("D8"))           '00012345 と表示
Console.WriteLine((1234.567).ToString("00000.00"))  '01234.57 と表示

上の (12345) の部分は文字列 "12345" を Integer型 データとして変換されます。 また (1234.567) の部分は文字列 "1234.567" を Double型 データとして変換され、それぞれの ToString メソッドが呼ばれます。

ToString メソッドの引数の文字列には各種存在し、 「標準の数値書式指定文字列」と「カスタム数値書式指定文字列」の2種類があります ので、順を追って説明します。

• 「標準の数値書式指定文字列」について
• 「カスタム数値書式指定文字列」について
• 「複合書式指定文字列」について

■「標準の数値書式指定文字列」について

次の表に、標準の数値書式指定文字列の説明および書式指定子ごとのサンプル出力を示します。

書式指定子	名称	対象データ型	結果	精度指定子	サンプル
"C" or "c"	通貨型	全ての数値型	通貨値	小数部の桁数	(123.456).ToString("C") = ¥123 (-123.456).ToString("C3") = -¥123.456
"D" or "d"	Decimal	整数型のみ	必要に応じて 負の符号が付く整数と小数	最小桁数	(1234).ToString("D") = 1234 (-1234).ToString("D6") = -001234
"E" or "e"	指数	全ての数値型	指数表記	小数部の桁数	(123.456).ToString("E") = 1.234560E+002 (0.12345).ToString("e3") = 1.235e-001
"F" or "f"	固定小数点	全ての数値型	必要に応じて 負の符号が付く整数と小数	小数部の桁数	(1234.567).ToString("F") = 1234.57 (1234).ToString("F1") = 1234.0 (-1234.56).ToString("F3") = -1234.560
"G" or "g"	全般	全ての数値型	固定小数点表記or 指数表記の何れか簡潔な形式	有効桁数	(-123.456).ToString("G") = -123.456 (123.4546).ToString("G4") = 123.5 (-1.23456E-25).ToString("G") = -1.23456E-25
"P" or "p"	ﾊﾟｰｾﾝﾄ	全ての数値型	数値に 100 を掛けて ％記号を付けて表示	小数部の桁数	(1).ToString("P") = 100.00 % (-0.39678).ToString("P1") = -39.7 %
"X" or "x"	16進数	整数型のみ	16進数文字列	結果文字列の桁数	(255).ToString("X") = FF (-1).ToString("X") = FFFFFFFF (255).ToString("x4") = 00ff (1000).ToString("X4") = 03E8

書式指定子は上記の様にたくさんありますが、実際に使ったものとなると "C" と "D" ぐらいです。 指数表記は科学計算で必要になるぐらいで、私はあまり使った記憶がありません。
尚、以下のソースで簡単な例を示します。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        '「Double」型データ
        Dim dbTest As Double = 0.0
        '「Long」型データ
        Dim lngTest As Long = 0

        '標準の数値書式指定文字列「C,c」
        Console.WriteLine("標準の数値書式指定文字列「C,c」")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("C"))
        dbTest = 123.56
        Console.WriteLine(dbTest.ToString("C"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("C2"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("C"))

        '標準の数値書式指定文字列「D,d」
        Console.WriteLine("標準の数値書式指定文字列「D,d」")
        lngTest = 123
        Console.WriteLine(lngTest.ToString("D"))
        Console.WriteLine(lngTest.ToString("D5"))
        lngTest = -123
        Console.WriteLine(lngTest.ToString("D6"))
    End Sub

実行結果がコンソールには以下様に表示されます。

標準の数値書式指定文字列「C,c」
\123
\124
\123.46
-\124
標準の数値書式指定文字列「D,d」
123
00123
-000123

■「カスタム数値書式指定文字列」について

次の表に、カスタム数値書式指定文字列の説明および書式指定子ごとのサンプル出力を示します。 （よく使うものをピックアップしてあります）

書式指定子	名称	説明	サンプル
"0"	ゼロ プレース ホルダー	対応する数字でゼロを置き換えます。 置き換えが行われるのは対応する数字が存在する場合です。 それ以外の場合は結果の文字列にはゼロが表示されます。	(1234).ToString("00000") = "01234" (-1.23).ToString("000.000") = "-001.230" (123.456).ToString("00.00") = "123.46"
"#"	桁 プレース ホルダー	対応する数字で "#" 記号を置き換えます。 置き換えが行われるのは対応する数字が存在する場合です。 それ以外の場合は結果の文字列に数字は表示されません。	(1234).ToString("00000") = "01234" (-1.23).ToString("000.000") = "-001.230" (123.456).ToString("00.00") = "123.46"
"."	小数点	結果の文字列の小数点位置を決定します。	(123.45).ToString("0.0") = "123.5" (-1.2).ToString("00.00") = "-01.20"
","	桁区切り 数値位取り	(0 または #) の間に1つ以上の "," が在る場合は 桁区切り記号が挿入。 数値位取りとしては 指定された "," ごとに数値を 1000 で除算します。	(123456).ToString("#,0") = "123,456" (1678).ToString("0,") = "2" (123456789).ToString("0,,") = "123"
";"	セクション 区切り	正、負、ゼロの数値に対して 別々の書式指定文字列でセクションを定義します。 2セクション: ・最初のセクションが正の値とゼロに適用 ・2番目のセクションが負の値に適用 3セクション: ・最初のセクションが正の値に適用 ・2番目のセクションが負の値に適用 ・3番目のセクションがゼロに適用	(12.345).ToString("#0.0#;(#0.0#);-\0-") = "12.35" (0).ToString("#0.0#;(#0.0#);-\0-") = "-0-" (-12.345).ToString("#0.0#;(#0.0#);-\0-") = "(12.35)"
"%"	パーセント プレース ホルダー	数値に 100 を乗算し結果の文字列に パーセント記号を挿入します。	(0.3697).ToString("%#0.00") = %36.97
'文字列'	リテラル 文字列 区切り	囲まれた文字列が結果の文字列に そのまま出力される。	(0.3697).ToString("'P:'%#0.00") = P:%36.97

尚、上記の例を以下のソースで示します。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        '「Double」型データ
        Dim dbTest As Double

        'カスタム数値書式指定文字列["0"]
        Console.WriteLine("カスタム数値書式指定文字列[""0""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("00000"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("00000.00"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("00000.00"))

        'カスタム数値書式指定文字列["#"]
        Console.WriteLine("カスタム数値書式指定文字列[""#""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("#####"))
        dbTest = 123.456
        Console.WriteLine(dbTest.ToString("#####.##"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("#####.##"))

        'カスタム数値書式指定文字列[";"]
        Console.WriteLine("カスタム数値書式指定文字列["";""]")
        dbTest = 123
        Console.WriteLine(dbTest.ToString("#####;[#####];'ZERO'"))
        dbTest = 0
        Console.WriteLine(dbTest.ToString("#####;[#####];'ZERO'"))
        dbTest = -123.56
        Console.WriteLine(dbTest.ToString("#####.##;[#####.##];'ZERO'"))

        '最後に複合的な使い方
        Console.WriteLine("最後に複合的な使い方")
        dbTest = 12345678.123
        Console.WriteLine(dbTest.ToString("'テストデータ：'#,0.00"))
    End Sub

実行結果がコンソールには以下様に表示されます。

セクション区切りを使用して1個の書式文字列で、正、負、ゼロで別々の書式が指定できますので、 数値を判断して個別に処理を分けなくてもよくなります。

カスタム数値書式指定文字列["0"]
00123
00123.46
-00123.56
カスタム数値書式指定文字列["#"]
123
123.46
-123.56
カスタム数値書式指定文字列[";"]
123
ZERO
[123.56]
最後に複合的な使い方
テストデータ：12,345,678.12

■「複合書式指定文字列」について

複合書式指定文字列とは、出力される固定文字列の中に挿入されるべきデータ用のプレースホルダーを記入したものです。 このプレースホルダーはインデックス化されていて、「0」から順に番号が振られます。
この複合書式指定文字列を引数として使えるメソッドに String.Format や Console.WriteLine などがあります。 複合書式指定文字列の引数の後ろに、プレースホルダーに対応する出力したいデータを記述します。

この説明ではよく分からないので、以下の例を見てください。
{ } で囲まれた数字がインデックスで、対応するデータの引数の位置を示しているのが分かります。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        Dim intData As Integer = 10
        Dim lngData As Long = 1000
        Dim dblData As Double = 123.45
        Console.WriteLine("Integer:{0}, Long:{1}, Double:{2}", intData, lngData, dblData)
    End Sub

実行結果がコンソールには以下様に表示されます。

Integer:10, Long:1000, Double:123.45

尚、プレースホルダーの書式は以下の様になっています。

<プレースホルダー書式>
{ index [,alignment] [:formatString] }

・index：パラメーター指定子とも呼ばれ、
         オブジェクトのリスト内で対応する項目を識別するための 0 から始まる数値です。 
・[,alignment]：書式設定フィールドの幅を指定する符号付き整数です。
         フィールド内の書式設定されたデータは、alignment が正の場合は右揃え、
         alignment が負の場合は左揃えされます。 埋め込みが必要な場合は、空白が使用されます。

・[:formatString]：書式設定されるオブジェクトの種類に適した書式指定文字列です。
        「標準の数値書式指定文字列」「カスタム数値形式文字列」が指定できます。

プレースホルダーの書式にいろいろ付け加えて、上記のソースを以下の様にしました。

    Private Sub btnTest_Click(sender As Object, e As EventArgs) Handles btnTest.Click
        Dim intData As Integer = 10
        Dim lngData As Long = 1000
        Dim dblData As Double = 123.45
        Console.WriteLine("Integer:{0,7:0.00}, Long:{1,-6:#,0}, Double:{2,10:###0.000}", _
                          intData, lngData, dblData)
    End Sub

実行結果がコンソールには以下様に表示されます。

Integer:  10.00, Long:1,000 , Double:   123.450

関連する記事

⇒指定した精度の桁数に数値を切り上げ　　　　：[Math.Ceiling,Math.Floor]
⇒文字列から数値型への変換（parse - tryparse）
⇒オブジェクト型から数値型への変換（TryParse）

前回の「Ajaxを使いPHPからデータを取得する方法その２（郵便番号からの住所取得）」では 郵便番号データを自分で用意し、更に Ajax 用の API(PHPでのプログラム) を作成しそれを呼出すことで郵便番号からの住所取得を行いました。

今回は日本全国の郵便番号データを日本郵便からダウンロードしAPIを整備するのも面倒なので、ネット上に公開されているAPIを利用する方法で行ってみます。

今回利用するAPIは「株式会社アイビス」さんが公開しているもので無料で使用可能な様です。 「郵便番号検索API 」の紹介ページは以下のURLを参照して下さい。

⇒http://zipcloud.ibsnet.co.jp/doc/api

このページで詳しく説明を行うと、上記のページで規定されているライセンス契約に違反する様ですので行いません。

以下のリクエストURLをブラウザに直接設定すると、ブラウザの画面に結果データが表示されます。

⇒https://zip-cloud.appspot.com/api/search?zipcode=8070042

■https://zip-cloud.appspot.com/api/search?zipcode=8070042 のブラウザでの結果

{
	"message": null,
	"results": [
		{
			"address1": "福岡県",
			"address2": "遠賀郡水巻町",
			"address3": "吉田",
			"kana1": "ﾌｸｵｶｹﾝ",
			"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
			"kana3": "ﾖｼﾀﾞ",
			"prefcode": "40",
			"zipcode": "8070042"
		},
		{
			"address1": "福岡県",
			"address2": "遠賀郡水巻町",
			"address3": "吉田団地",
			"kana1": "ﾌｸｵｶｹﾝ",
			"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
			"kana3": "ﾖｼﾀﾞﾀﾞﾝﾁ",
			"prefcode": "40",
			"zipcode": "8070042"
		}
	],
	"status": 200
}

同一郵便番号で複数の住所が該当する場合があるので、「results」は配列でのデータが返されます。
この API を ajax で処理しているソースを以下に示します。

■Ajaxを使いPHPからデータを取得するHTMLファイルその２

<html>
<head>
<meta charset="utf-8">
<title>test ajax zipcode</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Ajax関数
function getData() {
    //
    var incode = $("#zipcode").val();
    $.ajax({
        type: 'get'
      , url: 'https://zip-cloud.appspot.com/api/search'
      , dataType:'jsonp'        // 応答のデータの種類 
      , data: { 
            zipcode: incode     // 郵便番号
        }
      , jsonp: 'callback'       //コールバックパラメータ名の指定
    }).done(function(res){
        // ajaxがOK
        if (res.status == "200") {
            var str = "";
            var obj = res.results[0];
            str = obj.prefcode;
            $("#prefcode").text(str)
            str = obj.address1 + ' ' + obj.address2 + ' ' + obj.address3;
            $("#address").text(str)
            str = obj.kana1 + ' ' + obj.kana2 + ' ' + obj.kana3;
            $("#kana").text(str)
        } else {
            alert('エラー:' + res.status);
        }
    }).fail(function() {
        // 取得エラー
        alert('取得エラー');
    });
    return false;
}
</script>
</head>
<body>
    <h1>test ajax zipcode</h1>
    ZIPCODE:<input type="text" id="zipcode" size="10" maxlength="10"><br />
    都道府県CODE:<div id="prefcode"></div><br />
    住所漢字:<div id="address"></div><br />
    住所カナ:<div id="kana"></div><br />
    <button onclick="getData();">Ajax</button>
</body>
</html>

■実際の動作

このプログラムで気をつけるところは dataType の指定を jsonp の部分です。 通常の ajax では json データを扱うので json と指定するのですが、 今回は存在する URL が外部のため、クロスドメインの制限に引っかかってしまいます。

この制限を回避するために jsonp を使います。 jsonp では返答の json データを引数とした関数（コールバック）で囲んだデータとして返されます。 この説明では何を言っているのか分からないと思いますので、先ほどのデータを例にすると以下の様にデータが返されてきます。 （データを callback() で囲った形です。）

callback(
{
	"message": null,
	"results": [
		{
			"address1": "福岡県",
			"address2": "遠賀郡水巻町",
			"address3": "吉田",
			"kana1": "ﾌｸｵｶｹﾝ",
			"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
			"kana3": "ﾖｼﾀﾞ",
			"prefcode": "40",
			"zipcode": "8070042"
		},
		{
			"address1": "福岡県",
			"address2": "遠賀郡水巻町",
			"address3": "吉田団地",
			"kana1": "ﾌｸｵｶｹﾝ",
			"kana2": "ｵﾝｶﾞｸﾞﾝﾐｽﾞﾏｷﾏﾁ",
			"kana3": "ﾖｼﾀﾞﾀﾞﾝﾁ",
			"prefcode": "40",
			"zipcode": "8070042"
		}
	],
	"status": 200
}
)

この callback() は結果的に done を呼出すことになり、データ処理が行えます。

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

■このページの内容

• javascriptで動的に追加したHTMLでイベント処理を発火させる
• 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>

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

■このページの内容

• table 先頭行を eq() でIndexを指定し削除する
• tr にカスタム属性を宣言し、それを参照して行を削除する
• tr の各行に削除ボタンを設置し、自分自身の行を削除する

■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>

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

尚、セレクタの指定で 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>

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

■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>

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

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

<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>