データを表形式で表示する為に table タグを用いますが、以下のページでは table の外側からデータを取得する方法を説明しました。
⇒JavaScript jQueryで table の操作する方法その１・データ取得
上記の table に thead tbody のタグを記述して、 tr オブジェクトの何番目かを eq() メソッドの使って該当行の tr オブジェクトを取得し、その内部の td オブジェクトに アクセスし内部のデータを取得ていました。
今回の取得方法は、各 tr の中に取得のアクションを起すボタンを置いて、該当行の中身を取得し表示します。
以下のソースを見て下さい。 tbody の中の tr の各 td にクラスを宣言しています。 さらにメモ欄の td には内部に input タグを設置しさらにクラスを宣言しています。
「class="btnGet"」のボタンクリックイベントの関数の中で parent() メソッドを2回使って tr タグのオブジェクトを取得しています。 tr タグのオブジェクトの find() メソッドを使って td および input タグのオブジェクトを取得します。 取得したオブジェクトの text() および val() メソッドで内部の値を取得します。
尚、find()されたオブジェクトの存在をチェックする為に length プロパティが「0」以外かを判定しています。 find() が返すオブジェクトが存在すれば length プロパティが「1」になるので、 if の判定は true となります。
【今回使用したメソッドの説明】 ・find()：指定要素が持つ全ての子要素および孫要素から、指定条件式に合致するものを選択します。 ・text()：指定した要素が持つテキストノードを結合したものを返します。 ・val() ：要素のvalue属性を返します。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery get-5</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>
<th>取得</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Name">りんご</td>
<td class="Number">2</td>
<td class="Price">100</td>
<td class="Amount">200</td>
<td><input class="Memo" value="りんごです" /></td>
<td><button class="btnGet">取得</button></td>
</tr>
<tr>
<td class="Name">みかん</td>
<td class="Number">5</td>
<td class="Price">50</td>
<td class="Amount">250</td>
<td><input class="Memo" value="ああああ" /></td>
<td><button class="btnGet">取得</button></td>
</tr>
<tr>
<td class="Name">いちご</td>
<td class="Number">3</td>
<td class="Price">250</td>
<td class="Amount">750</td>
<td><input class="Memo" value="ＡＡＡＡ" /></td>
<td><button class="btnGet">取得</button></td>
</tr>
</tbody>
</table>
<script>
$(function () {
//<button class="btnGet">のクリックイベントの関数を宣言
$(".btnGet").click(function(){
//クリック行のjqueryオブジェクト取得
var objTr = $(this).parent().parent();
//表示用文字列クリア
var strMsg = "";
//のjqueryオブジェクト取得
obj = objTr.find(".Name");
if( obj.length ) {
strMsg += "Name:" + obj.text() + "\n";
}
//のjqueryオブジェクト取得
obj = objTr.find(".Number");
if( obj.length ) {
strMsg += "Number:" + obj.text() + "\n";
}
//のjqueryオブジェクト取得
obj = objTr.find(".Price");
if( obj.length ) {
strMsg += "Price:" + obj.text() + "\n";
}
//のjqueryオブジェクト取得
obj = objTr.find(".Amount");
if( obj.length ) {
strMsg += "Amount:" + obj.text() + "\n";
}
//のjqueryオブジェクト取得
obj = objTr.find(".Memo");
if( obj.length ) {
strMsg += "Memo:" + obj.val() + "\n";
}
//明細行の内容表示
alert(strMsg);
});
});
</script>
</body>
今回の方法は、各明細行に対して個別に行う処理が異なる場合に有効になると思います。
例えば、各明細行の修正画面を別に作成し、その画面に飛ばすためのアクションとしてのボタンや、 個別に削除や更新を行う場合に対応する PHP プログラムに遷移させたりできると思います。
PR
コメント