[2020/03/24] JavaScript jQueryでAjaxを使いPHPからデータを取得する方法その３（外部公開APIによる郵便番号からの住所取得） (No.156)
[2020/03/09] JavaScript jQueryで table の操作する方法その４・データ行の追加と削除 (No.155)
[2020/03/09] JavaScript jQueryで table の操作する方法その３・データ削除 (No.154)
[2020/03/07] JavaScript jQueryで table の操作する方法その２・データ追加 (No.153)
[2020/03/07] JavaScript jQueryで table の操作する方法その１・データ取得 (No.152)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
前回の「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>■実際の動作
ZIPCODE:
都道府県CODE: 住所漢字: 住所カナ:
このプログラムで気をつけるところは 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 を呼出すことになり、データ処理が行えます。
PR -
今まではデータ行の追加と削除処理を個別に説明してきましたが、 今回は table への操作処理の第4弾として 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を指定し削除する
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>
-
今回は 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>その他１</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>その他２</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
-
データを表形式で表示する為に 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">みかんの行の単価を取得その２</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 への行追加、行削除へと移っていきます。