SQLの窓

2019年02月18日


jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する

nextAll は、起点となる要素から下方向に存在する同じ階層の要素を全て取得します。引数にセレクタが指定できるので、ここでは TD にクラスを設定して目的の要素を特定しています。

特定する要素の属性が無い場合は、$(this).nextAll().eq(0).text() のようにして eq(順序番号) を指定して特定できます。但し、prevAll では近い要素から順序番号が小さくなるので注意して下さい。

コード 名称 金額 購入日 担当者 発注先
0002 問題集 002 4000 2015/08/24 田中 発注先002
0003 問題集 003 3000 2015/08/23 山田 発注先003
0004 問題集 004 2000 2015/08/22 山田 発注先004
0001 問題集 001 1000 2015/08/21 田中 発注先001
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {

	// 名称のリンクに設定したクラスでイベント作成
	// ※ 各 td のクラスで取得
	$(".check").on("click", function(){
		$("#cd").val($(this).prevAll(".t0").text());
		$("#name").val($(this).text());
		$("#kin").val($(this).nextAll(".t1").text());
		$("#bdate").val($(this).nextAll(".t2").text());
		$("#tanto").val($(this).nextAll(".t3").text());
		$("#co").val($(this).nextAll(".t4").text());
	});

	// 購入日のリンクに設定したクラスでイベント作成
	// ※ 各 td の順序で取得
	$(".t2").on("click", function(){
		$("#cd").val($(this).prevAll().eq(2).text());
		$("#name").val($(this).prevAll().eq(1).text());
		$("#kin").val($(this).prevAll().eq(0).text());
		$("#bdate").val($(this).text());
		$("#tanto").val($(this).nextAll().eq(0).text());
		$("#co").val($(this).nextAll().eq(1).text());
	});

});

</script>
<style type="text/css">
.check, .t2 {
	text-decoration: underline;
	cursor: pointer;
	color: blue;
}
#target_area th, #target_area td {
	padding: 5px;
}
#target_area input {
	width:120px;
	font-size: 18px;
}
#target_area table {
	margin-top: 10px;
	border-collapse: collapse;
	border: solid #000000 1px;
	background-color: #ffffff;
}
#target_area th {
	border: solid #000000 1px;
	background-color: silver;
}
#target_area td {
	border: solid #000000 1px;
}
</style>
<div id="target_area">
<p><input id="cd"> <input id="name"> <input id="kin"></p>
<p><input id="bdate"> <input id="tanto"> <input id="co"></p>
<table>
	<tbody>
	<tr>
		<th>コード</th>
		<th>名称</th>
		<th>金額</th>
		<th>購入日</th>
		<th>担当者</th>
		<th>発注先</th>
	</tr>
	<tr>
		<td class="t0">0002</td>
		<td class="check">問題集 002</td>
		<td class="t1">4000</td>
		<td class="t2">2015/08/24</td>
		<td class="t3">田中</td>
		<td class="t4">発注先002</td>
	</tr>
	<tr>
		<td class="t0">0003</td>
		<td class="check">問題集 003</td>
		<td class="t1">3000</td>
		<td class="t2">2015/08/23</td>
		<td class="t3">山田</td>
		<td class="t4">発注先003</td>
	</tr>
	<tr>
		<td class="t0">0004</td>
		<td class="check">問題集 004</td>
		<td class="t1">2000</td>
		<td class="t2">2015/08/22</td>
		<td class="t3">山田</td>
		<td class="t4">発注先004</td>
	</tr>
	<tr>
		<td class="t0">0001</td>
		<td class="check">問題集 001</td>
		<td class="t1">1000</td>
		<td class="t2">2015/08/21</td>
		<td class="t3">田中</td>
		<td class="t4">発注先001</td>
	</tr>
	</tbody>
</table>
</div>






タグ:jquery
【メソッド:jQueryの最新記事】
posted by lightbox at 2019-02-18 12:02 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり