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

2020/03/07

JavaScript jQueryで table の操作する方法その１・データ取得

データを表形式で表示する為に table タグを用いますが、 table の中の1個のセルデータを取得するには少し順を追って処理する必要があります。以下の様に各タグを順番に指定することになります。

　tableタグ ⇒ trタグ ⇒ tdタグ内のテキストの取得

trタグも tdタグもそれぞれ複数の連続した要素から成り立っていますので、何番目の要素であるかを指示することが必要になります。そこで使用するのが eq() メソッドです。先ずは eq() メソッドの説明から行い、その後で table の処理の説明をします。

■このページの内容

eq() メソッドの使い方
eq() メソッドの使って li タグの中身を変更
簡単な table の要素の取得
簡単な table の要素の取得２（ thead tbody を記述）

■eq() メソッドの使い方

table の操作と言っておきながら例として li タグを取り上げていますが、 li タグの方が見た感じが簡単なので直感的に分かるかと思います。

以下のソースを見て下さい。 li タグで5個のデータを表示しています。「id="btn1"」のボタンクリックイベントの関数の中で eq() メソッドを使って li タグの2番目の要素を取得しています。 eq() メソッドの引数は要素のインデックスを指定しますが、インデックスの先頭は 0（ゼロ） から始まるので 2番目の場合は eq(1) と指定します。

「id="btn2"」のボタンクリックイベントでは更に処理を発展させて li タグの全ての要素を取得しています。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
    <li>北海道</li>
    <li>本州</li>
    <li>四国</li>
    <li>九州</li>
    <li>沖縄</li>
</ul>
<button id="btn1">2番目の要素を取得</button><br />
<button id="btn2">全ての要素を取得</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //<li>の2番目の要素を取得
        var str = $("li").eq(1).text();
        alert(str);
    });
    //<button id="btn2">のクリックイベントの関数を宣言
    $("#btn2").click(function(){
        //<li>の全ての要素を取得
        var str = '';
        for (var i = 0; i < $("li").length; i++) {
            str += $("li").eq(i).text() + "\n";
        }
        alert(str);
    });
});
</script>
</body>

■eq() メソッドの使って li タグの中身を変更

li タグの中身を変更するにはソースを以下の様に記述します。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq2</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
    <li>北海道</li>
    <li>本州</li>
    <li>四国</li>
    <li>九州</li>
    <li>沖縄</li>
</ul>
<button id="btn1">全ての要素を変更</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //<li>の全ての要素を変更
        for (var i = 0; i < $("li").length; i++) {
            //取得文字列に"."追加
            var str = $("li").eq(i).text() + ".";
            //要素を変更
            $("li").eq(i).text(str);
        }
    });
});
</script>
</body>

■簡単な table の要素の取得

それではいよいよ table の要素の取得を行います。データ表としては見出し部分を含めて4行4列の簡単なものですが、以下の table の中から3行目の「みかん」の単価の値を取得しています。

最初のボタン「id="btn1"」では、最初のセレクタ宣言から始まり、単価の部分まで"."（ドット）でオブジェクトを繋いで一気にセルのテキストを取得しています。
ここで $("table").children().children() の部分で .children() が1回余計ではないかと思われるかもしれませんが、これでOKなのです。この table には実は tbody タグが省略されているからです。そのため tr の所にたどり着くまでに tbody を介しているからです。

次のボタン「id="btn2"」ではこの辺りを1個ずつのオブジェクトに階層を順次深めて処理を行っています。

ただ、セレクタの部分で一気に tr のところまで指示してやれば $("table").children().children() の部分を $("table tr") で置き換えられます。

<html>
<head>
<meta charset="utf-8">
<title>test jQuery eq3</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
    <tr>
        <th>品名</th>
        <th>数量</th>
        <th>単価</th>
        <th>金額</th>
    </tr>
    <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>
</table>
<button id="btn1">みかんの行の単価を取得</button>
<button id="btn2">みかんの行の単価を取得その２</button>
<script>
$(function () {
    //<button id="btn1">のクリックイベントの関数を宣言
    $("#btn1").click(function(){
        //「みかんの」の単価を取得
        var str = $("table").children().children().eq(2).children().eq(3).text();
        alert(str);
        //より簡単な方法
        var str = $("table tr").eq(2).children().eq(3).text();
        alert(str);
    });
    //<button id="btn2">のクリックイベントの関数を宣言
    $("#btn2").click(function(){
        //オブジェクトの連結を分解
        var objTable = $("table");              //<table> オブジェクト
        var objTbody = objTable.children();     //<tbody> オブジェクト
        var objTrarr = objTbody.children();     //<tr> 配列オブジェクト
        var objTr    = objTrarr.eq(2);          //<trの3番目> オブジェクト
        var objTdarr = objTr.children();        //<td> 配列オブジェクト
        var str      = objTdarr.eq(3).text();   //<tdの4番目> オブジェクト
        alert(str);
    });
});
</script>
</body>

■簡単な table の要素の取得２（ thead tbody を記述）

上記の table に正式な感じにする為 thead tbody のタグを記述して、 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(){
        //「みかんの」の単価を取得(index = 1:2番目)
        var str = $("table tbody tr").eq(1).children().eq(3).text();
        alert(str);
    });
});
</script>
</body>

セレクタの中で一気に table ⇒ tbody ⇒ tr とオブジェクト参照を進め、tr の中の2番目のIndexを参照しています。今回の table はヘッダとボディに分けましたので「みかん」の行は2番目のIndexになります。その後は今までと同様にしてセルのテキストを取得します。

これで table からのデータ取得は一先ず終わりにしたいと思います。今後は table への行追加、行削除へと移っていきます。

JavaScript
0CM

- 2020/03/05
JavaScript PHPからのスクリプトの生成と制御
JavaScript の記事の中ではいままで全て静的なソースで説明を行ってきましたが、今回は JavaScript のスクリプトを PHP から生成する例を示します。

Web のシステムを組む場合 PHP をよく使っていますが PHP では動的に HTML のスクリプトを生成します。
HTML のスクリプトと言っても結局は文字列の集合体であって JavaScript のスクリプトも同様に動的に出力できます。

以下の例は PHP のソースですがページが表示された最初にメッセージを表示する部分を JavaScript として動作する様に PHP で出力させています。

■PHP から JavaScript を生成させる簡単な例（test-java.php 等のファイル名として実行）

<?php // javascript の文字列の生成 $strJavaScript = '<script> $(function() { alert("test"); }); </script> '; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <?php // 生成された javascript の出力 echo $strJavaScript; ?> </head> <body> <p>テストメッセージ</p> </body> </html>

上記のソースは PHP のソースとしてファイル拡張子として .php としています。当然のことながら Web 上では PHP が実行できる環境は必須です。
尚、 HTML の BODY 部の中身は特に意味があるものではありません。

これを実行させた場合に、アラートで「test」と表示されるはずです。ブラウザで生成された HTML スクリプトは以下の様になるはずです。

■生成された HTML スクリプト

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function() { alert("test"); }); </script> </head> <body> <p>テストメッセージ</p> </body> </html>

今回の例は HEAD 部 BODY 部ともにほとんど固定されたものですが PHP ではそれらの中身全て動的に生成が可能ですし、そういったことが一般的です。今回は javascript の生成のみを可変的にしましたが PHP と組み合わせることで複雑なことができると思います。
例えば、$_GET や $_POST などで動作指示を行い、今回のアラート表示の実行を制御することができます。

■$_GET で動作指示を行う例

<?php // javascript の文字列クリア $strJavaScript = ''; if (isset($_GET["alert"]) == true) { // [test-java.php?alert] javascript の文字列の生成 $strJavaScript = '<script> $(function() { alert("test"); }); </script> '; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <?php // 生成された javascript の出力 echo $strJavaScript; ?> </head> <body> <p>テストメッセージ</p> </body> </html>

この例ですと「test-java.php?alert」とすればページが最初に表示された時にアラートが表示されます。
「test-java.php」のままではアラートは表示されません。
- JavaScript
- 0CM
- 2020/02/10
JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
前回は単独での jQuery のセレクタの存在確認を書きましたが、今回は、複数のセレクタを書いた時にどうなるかを示します。

以下のソースにその例を示します。11行目でカンマ区切りで3個のIDセレクタを見ていますが、その length プロパティが３の場合に各セレクタのクリック時の関数を定義する様にしています。

$() で返されるセレクタのオブジェクトには length プロパティを持っていて、セレクタとして認識された個数を返します。
クリック時の関数の中では自分自身の ID名 を取得し番号の部分を抽出しています。さらにその番号を使ってメッセージ領域の ID名 を作成し内部のHTMLを書き変えています。

■複数セレクタの存在確認の例

<html> <head> <meta charset="utf-8"> <title>test sel</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // [TestN]ボタンで「メッセージN」の変更 if($("#Test1,#Test2,#Test3").length == 3) { //セレクタの個数確認OK $("#Test1,#Test2,#Test3").click(function () { //ID名取得 var id = $(this).attr("id"); //番号の抽出 var no = id.replace("Test", ""); //pタグIDを指定して内部 HTML 書換 $("#msgchg" + no).text("aaaaaaa"); }); } else { alert('セレクタ「Test1」「Test2」「Test3」の何れかが存在しません'); } }); </script> </head> <body> <h2>test sel</h2> <p id="msgchg1">メッセージ１</p> <p id="msgchg2">メッセージ２</p> <p id="msgchg3">メッセージ３</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> <button id="Test3">Test3</button><br /> </body> </html>

上の例でボタンのIDで Test3 の部分を仮に TestA にすると、フォームのロードの直後に「セレクタ「Test1」「Test2」「Test3」の何れかが存在しません」のメッセージが表示されます。
- JavaScript
- 0CM

2020/02/10

JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認

先ずは jQuery のセレクタの使い方の例として以下のソースを見て下さい。特に難しいところは無く、各ボタンのクリックに対応して p タグ の内容を書き変えています。

■最初の簡単な例

<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // [Test1]ボタンで「メッセージ１」の変更
    $('#Test1').click(function () {
        $("#msgchg1").text("aaaaaaa");
    });

    // [Test2]ボタンで「メッセージ２」の変更
    $('#Test2').click(function () {
        $("#msgchg2").text("bbbbbbbbbbb");
    });
});
</script>
</head>
<body>
    <h2>test sel3</h2>
    <p id="msgchg1">メッセージ１</p>
    <p id="msgchg2">メッセージ２</p>
    <br />
    <button id="Test1">Test1</button><br />
    <button id="Test2">Test2</button><br />
</body>
</html>

上の例でソースを入力する時に間違えたとして、以下の様に #Test2 の部分を #TestA にしたとします。

■ソースを間違えた簡単な例

<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // [Test1]ボタンで「メッセージ１」の変更
    $('#Test1').click(function () {
        $("#msgchg1").text("aaaaaaa");
    });

    // [Test2]ボタンで「メッセージ２」の変更
    $('#TestA').click(function () {
        $("#msgchg2").text("bbbbbbbbbbb");
    });
});
</script>
</head>
<body>
    <h2>test sel3</h2>
    <p id="msgchg1">メッセージ１</p>
    <p id="msgchg2">メッセージ２</p>
    <br />
    <button id="Test1">Test1</button><br />
    <button id="Test2">Test2</button><br />
</body>
</html>

上の例では、ボタンの ID と、クリック関数の宣言の ID が異なりますので、当然「メッセージ２」は変更されません。
そこでこれを回避するためには、クリック関数でセレクタが存在する時に関数の宣言を有効にすれば良く、無い場合にはその由をメッセージを表示してみます。
セレクタが存在するかどうかは、セレクタの length プロパティが０では無い場合に関数宣言を行います。上記のソースを修正したものを以下に示します。（.length != 0 の部分を [0] にしても同様な処理ができます）

■ソース修正した簡単な例

<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // [Test1]ボタンで「メッセージ１」の変更
    if($('#Test1').length != 0) {
        $('#Test1').click(function () {
            $("#msgchg1").text("aaaaaaa");
        });
    } else {
        alert('セレクタ「#Test1」が存在しません');
    }

    // [Test2]ボタンで「メッセージ２」の変更
    if($('#TestA').length != 0) {
        $('#TestA').click(function () {
            $("#msgchg2").text("bbbbbbbbbbb");
        });
    } else {
        alert('セレクタ「#TestA」が存在しません');
    }
});
</script>
</head>
<body>
    <h2>test sel3</h2>
    <p id="msgchg1">メッセージ１</p>
    <p id="msgchg2">メッセージ２</p>
    <br />
    <button id="Test1">Test1</button><br />
    <button id="Test2">Test2</button><br />
</body>
</html>

上の例を実行すると、ソースをロードした直後に、「セレクタ「#TestA」が存在しません」と表示されます。
この方法を使えば HTML 上の ID Class 名の間違いを探しやすと思いますが、如何でしょうか。

JavaScript
0CM

2020/02/06

JavaScript jQueryを使った checkbox の操作方法・その２（チェック件数）

今回は checkbox がチェックされている状態のものを全てカウントする方法について説明します。
以下のソースは以下の記事を少し変更したものです。
⇒JavaScript jQueryを使った checkbox の操作方法

■チェック件数取得

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk() {
    var intCnt = 0;
    // 選択済チェックボックス
    $('input[type="checkbox"]:checked').each(function() {
        intCnt += 1;
    });
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br />
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br />
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br />
    <br />
    <button onclick="getCountChk();">チェック件数取得</button>
</body>
</html>

16行目の $('input[type="checkbox"]:checked').each の部分でチェックされている全てのチェックボックスを列挙してカウントしています。これは非常にベタな方法で、個別に処理する必要が無ければ、以下の様にした方がより簡単にできます。

■チェック件数取得その２

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk() {
    // 選択済チェックボックス
    var intCnt = $('input[type="checkbox"]:checked').length;
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br />
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br />
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br />
    <br />
    <button onclick="getCountChk();">チェック件数取得</button>
</body>
</html>

入力画面でグループが異なるチェックボックスを設置することがありますので、その方法について例を示します。以下の例では、上のソース15行目の $('input[type="checkbox"]:checked').length の部分で name 属性でアクセスする様に変更しています。

■チェック件数取得その３

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk(strName) {
    // 選択済チェックボックス
    var intCnt = $('input[name="' + strName + '[]"]:checked').length;
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox 1</h2>
    <label><input name="chk1[]" type="checkbox" value="1" />チェック1-1</label><br />
    <label><input name="chk1[]" type="checkbox" value="2" />チェック1-2</label><br />
    <label><input name="chk1[]" type="checkbox" value="3" />チェック1-3</label><br />
    <br />
    <button onclick="getCountChk('chk1');">チェック件数取得</button>
    <br />
    <br />
    <h2>test checkbox 2</h2>
    <label><input name="chk2[]" type="checkbox" value="10" />チェック2-1</label><br />
    <label><input name="chk2[]" type="checkbox" value="20" />チェック2-2</label><br />
    <label><input name="chk2[]" type="checkbox" value="30" />チェック2-3</label><br />
    <br />
    <button onclick="getCountChk('chk2');">チェック件数取得</button>
</body>
</html>

JavaScript
0CM