[2020/03/07] JavaScript jQueryで table の操作する方法その2・データ追加 (No.153)
[2020/03/07] JavaScript jQueryで table の操作する方法その1・データ取得 (No.152)
[2020/03/05] JavaScript PHPからのスクリプトの生成と制御 (No.151)
[2020/02/10] JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認 (No.150)
[2020/02/10] JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認 (No.149)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
今回は table への操作処理の第1弾として table に行を追加する方法について説明します。
■このページの内容
■tr タグを文字列として作成しそれをそのまま行追加する
table の最終行への追加は tbody オブジェクトの append メソッドを使用します。 また、先頭行の前への追加は tbody オブジェクトの prepend メソッドを使用します。
以下のソースでは「id="btn1"」のボタンクリックイベントで最終行への追加を行い、 「id="btn2"」のボタンクリックイベントで先頭行の前への追加を行います。 尚、追加される行の中身はテストなので固定としています。<html> <head> <meta charset="utf-8"> <title>test jQuery add</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(){ //最終行に"<tr><td>~</td></tr>"の文字列を追加 var str = ""; str += "<tr>"; str += " <td>その他1</td>"; str += " <td>10</td>"; str += " <td>100</td>"; str += " <td>1000</td>"; str += "</tr>"; $('table tbody').append(str); }); //<button id="btn2">のクリックイベントの関数を宣言 $("#btn2").click(function(){ //先頭に"<tr><td>~</td></tr>"の文字列を追加 var str = ""; str += "<tr>"; str += " <td>その他2</td>"; str += " <td>10</td>"; str += " <td>100</td>"; str += " <td>1000</td>"; str += "</tr>"; $('table tbody').prepend(str); }); }); </script> </body>
以下で動作の様子が分かります。品名 数量 単価 金額 りんご 2 100 200 みかん 5 50 250 いちご 3 250 750 ■table 最終行のコピーを行追加する
table の最後の行を取得するにはセレクタで tbody の後に tr:last-child を追加することで、 その行のオブジェクトが取得できます。 その後、そのオブジェクトのクローンを作成し tbody の append メソッドで追加します。
上記の append メソッドの引数は文字列でしたが、今回は jqueyオブジェクト を渡しています。 このメソッドは 文字列、DOM Element および jqueyオブジェクト 何れでも動作します。<html> <head> <meta charset="utf-8"> <title>test jQuery add2</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(){ //最終行のjqueryオブジェクト取得 var obj = $("table tbody tr:last-child").clone(true); //最後尾にjqueryオブジェクト追加 $('table tbody').append(obj); }); }); </script> </body>
以下で動作の様子が分かります。
品名 数量 単価 金額 りんご 2 100 200 みかん 5 50 250 いちご 3 250 750 ■table に非表示のテンプレート行を持って最終行のコピーを行追加する
table の先頭にテンプレートとなる行を設けます。この行のスタイルは非表示にしておきます。
後は最終行のコピーを追加する時の様に、テンプレート行のオブジェクトを取得し、table の最後に追加してやります。<html> <head> <meta charset="utf-8"> <title>test jQuery add2</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 id="RowTemplate" style="display: none;"> <td>なし</td> <td>2</td> <td>50</td> <td>100</td> </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> </tbody> </table> <button id="btn1">最終行に追加</button> <script> $(function () { //<button id="btn1">のクリックイベントの関数を宣言 $("#btn1").click(function(){ //テンプレート行のjqueryオブジェクト取得 var obj = $('#RowTemplate').clone(); //非表示スタイルを表示にする obj.show(); //最後尾にjqueryオブジェクト追加 $('table tbody').append(obj); }); }); </script> </body>
品名 数量 単価 金額 りんご 2 100 200 みかん 5 50 250 いちご 3 250 750
PR -
データを表形式で表示する為に table タグを用いますが、 table の中の1個のセルデータを取得するには少し順を追って処理する必要があります。 以下の様に各タグを順番に指定することになります。
tableタグ ⇒ trタグ ⇒ tdタグ内のテキストの取得
trタグ も tdタグもそれぞれ複数の連続した要素から成り立っていますので、 何番目の要素であるかを指示することが必要になります。 そこで使用するのが eq() メソッドです。 先ずは eq() メソッドの説明から行い、その後で table の処理の説明をします。
■このページの内容
■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">みかんの行の単価を取得その2</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 の要素の取得2( 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 の記事の中ではいままで全て静的なソースで説明を行ってきましたが、 今回は 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」のままではアラートは表示されません。
-
前回は単独での jQuery のセレクタの存在確認を書きましたが、 今回は、複数のセレクタを書いた時にどうなるかを示します。
以下のソースにその例を示します。11行目でカンマ区切りで3個のIDセレクタを見ていますが、 その length プロパティが3の場合に各セレクタのクリック時の関数を定義する様にしています。
$() で返されるセレクタのオブジェクトには 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">メッセージ1</p> <p id="msgchg2">メッセージ2</p> <p id="msgchg3">メッセージ3</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」の何れかが存在しません」のメッセージが表示されます。
-
先ずは 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]ボタンで「メッセージ1」の変更 $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); // [Test2]ボタンで「メッセージ2」の変更 $('#Test2').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ1</p> <p id="msgchg2">メッセージ2</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]ボタンで「メッセージ1」の変更 $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); // [Test2]ボタンで「メッセージ2」の変更 $('#TestA').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ1</p> <p id="msgchg2">メッセージ2</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> </body> </html>
上の例では、ボタンの ID と、クリック関数の宣言の ID が異なりますので、当然「メッセージ2」は変更されません。
そこでこれを回避するためには、クリック関数でセレクタが存在する時に関数の宣言を有効にすれば良く、無い場合にはその由をメッセージを表示してみます。
セレクタが存在するかどうかは、セレクタの length プロパティが0では無い場合に関数宣言を行います。 上記のソースを修正したものを以下に示します。 (.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]ボタンで「メッセージ1」の変更 if($('#Test1').length != 0) { $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); } else { alert('セレクタ「#Test1」が存在しません'); } // [Test2]ボタンで「メッセージ2」の変更 if($('#TestA').length != 0) { $('#TestA').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); } else { alert('セレクタ「#TestA」が存在しません'); } }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ1</p> <p id="msgchg2">メッセージ2</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> </body> </html>
上の例を実行すると、ソースをロードした直後に、「セレクタ「#TestA」が存在しません」と表示されます。
この方法を使えば HTML 上の ID Class 名の間違いを探しやすと思いますが、如何でしょうか。