DBから取得したレコードをforEachで表示させ、ID単位で値を取得したい

Question

前提・実現したいこと

DBから取得したレコードをforEachで表示させ、ID単位で値を取得したい

発生している問題・エラーメッセージ

java(Spring MVC)を利用してECサイトを構築中です。
DBから注文関連の各種レコードを取得し、表にしてjspに表示させます。
必要な値の取得は全てできています。
この表には１レコードに１つのチェックボックスがついてきます。
表の下にはフォームが4つ設けられています。
c:forEachで取得できたレコードの数だけループして表示させます。

本題です。
チェックボックスをクリックしたとき、そのレコードと同じIDの情報を
4つのフォームにも表示させるようにしたいのですが、
思った動作をするのはループ1回目に表示されたレコードにチェックをした時のみで、
ループ2回目以降のレコードはチェックを入れても正しく動作をしません。
どのチェックボックスをクリックしてもループ1回目のレコードが表示されてしまいます。
※この部分はjQueryで実装しようとしています。

なんとか解決しようと思ったのですが、限界を迎えてしまいました。
どなたかご教授お願いできませんでしょうか。

該当のソースコード

<div class="scroll">
	<table class="margin" border="1" >
		<tr>
			<th class="emp-th">選択</th>
			<th class="emp-th">注文日</th>
			<th class="emp-th">注文番号</th>
			<th class="emp-th">顧客番号</th>
			<th class="emp-th">顧客氏名</th>
			<th class="emp-th">合計金額</th>
		</tr>
	<c:forEach var="pay" items="${payment}" varStatus="loop">
		<form:form modelAttribute="paymentRegistModel">
			<tr>

				<td><input type="checkbox" id="aaa"></td>
				<th>${pay.new_order_date}</th>
				<th>${pay.new_order_id}</th>
				<th>${pay.customer_id}</th>
				<th>${pay.customer_name}</th>
				<th>${pay.total_price}</th>

			</tr>
		</form:form>
	</c:forEach>
	</table>
</div>

<c:forEach var="pay" end="0" items="${payment}">
	<form:form modelAttribute="paymentRegistModel">
		入金日：<form:input path="payment_date" name="pd" id="pd" class="letter" type="text" value="${pay.payment_date}"/><br>
		合計額：<form:input path="total_price" name="tp" id="tp" class="letter" type="text" value="${pay.total_price}"/><br>
		入金額：<form:input path="total_price" name="tp1" id="tp1" class="letter" type="text" value="${pay.total_price}"/><br>
		振込人名：<form:input path="customer_name" name="cn" id="cn" class="letter" type="text" value="${pay.customer_name}"/><br>

	</form:form>

</c:forEach>

<script>

//フォーム初期値を空にする（しないと初期状態で0とか入る）
	$(document).one("ready", function(){
		$("#pd").val("");
		$("#tp").val("");
		$("#tp1").val("");
		$("#cn").val("");
	});

	$(function(){
//DBから拾った値を一度変数化
		var pd = $('#pd').attr("value");
		var tp = $('#tp').attr("value");
		var tpp = $('#tp1').attr("value");
		var cn = $('#cn').attr("value");

//チェックボックスを押したらフォームに表示させる

		$('[type=checkbox]').click(function(){

			$('#pd').val(pd);
			$('#tp').val(tp);
			$('#tp1').val(tpp);
			$('#cn').val(cn);
		})
	});

//チェックボックスを外したら表示を消す
	$(function(){
		$('#aaa').on('change',function(){
			var test = $(this).prop('checked');
			if(test != true){
				$('#pd').val("");
				$('#tp').val("");
				$('#tp1').val("");
				$('#cn').val("");
			}
		})
	});

</script>

試したこと

・DBから取得した値が格納されている${payment}の位置を見直し
・jQueryの書き方をいくつか試す

Comments

[shinoharat]

こんにちは。
「まだ回答を求めています」に釣られて来ました。

内容を拝見したのですが、m.ts10806 さんのご回答がパーフェクトな気がします。

どこで躓いているのか、教えてもらえるとアドバイスしやすいです。

「m.ts10806 さんの言っていることが分からない」とか、
「言っていることは分かるが具体的なコードが1ミリも浮かばない」とか、
「自分なりにここまで作ってみたけど動かない」などなど。

[sql_ga_kakenai]

ありがとうございます。コードと格闘していたので遅くなってしまいました。申し訳ありません。
一応解決したのですが、あんまりよくわかってない部分もあるのでアドバイス等頂けると幸いです。
今回はm.ts10806 さんの仰る通り、classを作ってそこを起点にインデックスを取得し、そこからchildNodesの値を引っ張り出すという書き方にしたのですが、感覚的にかなり無理やり感があるように思いました。

１)childNodesで値を取る場合、どこを指定すればいいのかよく分かりません。
なんとなく値が取れるのでいいかなと思ったのですが、今回は「childNodes[1].children[0]」とか「a.childNodes[15].value」とか「a.childNodes[11].innerText」といった書き方が混在してしまっています。。

２）childNodesから値を取得するという事は、javascriptではよくある事なのでしょうか…？

３）もうちょっとスマートな書き方といいますか、「こういう方向性で書けば同じ事ができる」などがあればご教授お願いできますでしょうか？

Answer 1

m.ts10806さんの助言からなんとか自己解決できました…
「インデックスってなに？？？」からの手直しでしたが、どうにかなりました。
キツい。でも勉強になりました。ありがとうございました。

今回はこのようにしました。
（childNodesの解説のほとんどが素のjavascriptだったので、jQueryでなくjsで書きました。）

×チェックボックス単体のidを起点にしていた
〇チェックボックスを含めた必要な情報全体のclassを起点にした

×jstlで書いたforEach文から得られた値をjavascriptで取得しようとしていた
〇javascriptにもforEach文を書き、そこで得られた値の中から必要なものを取り出して取得した

<div class="scroll">
	<table class="margin" border="1" >
		<tr>
			<th class="emp-th">選択</th>
			<th class="emp-th">注文日</th>
			<th class="emp-th">注文番号</th>
			<th class="emp-th">顧客番号</th>
			<th class="emp-th">顧客氏名</th>
			<th class="emp-th">合計金額</th>
		</tr>
	<c:forEach var="pay" varStatus="loop" items="${payment}">
		<form:form modelAttribute="paymentRegistModel">
			<tr class = "index">
				<td><input type="checkbox" id="aaa"></td>
				<th>${pay.new_order_date}</th>
				<th>${pay.new_order_id}</th>
				<th>${pay.customer_id}</th>
				<th>${pay.customer_name}</th>
				<th>${pay.total_price}</th>
				<input type="hidden"  id="loop_hidden" value="${loop.index}"><% //loop.indexを無くすとjsが反応しなくなる.. %>
				<input type="hidden"  id="payment_date" value="${pay.payment_date}">
			</tr>
		</form:form>
	</c:forEach>
	</table>
</div>

<c:forEach end="0" var="pay" varStatus="loop" items="${payment}">
		<form:form modelAttribute="paymentRegistModel">

				入金日：<form:input path="payment_date" id="pd" class="letter" type="text" value="${pay.payment_date}"/><br>
				合計額：<form:input path="total_price" id="tp" class="letter" type="text" value="${pay.total_price}"/><br>
				入金額：<form:input path="total_price" id="tp1" class="letter" type="text" value="${pay.total_price}"/><br>
				振込人名：<form:input path="customer_name" id="cn" class="letter" type="text" value="${pay.customer_name}"/><br>

		</form:form>
</c:forEach>

//フォーム初期値を空にする
	$(document).one("ready", function(){
		$("#pd").val("");
		$("#tp").val("");
		$("#tp1").val("");
		$("#cn").val("");
	});

//チェックボックスをクリックするとフォームに値を出力する
//indexクラスを取得→内容を配列化→forEach文で繰り返し→childNodesから各値を取得

window.onload = function() {

	var rows = document.querySelectorAll(".index");
	var rowsArray = Array.from(rows);

	rowsArray.forEach(function(a) {
		var check =a.childNodes[1].children[0];
		var payment_date = a.childNodes[15].value;
		var total_price = a.childNodes[11].innerText;
		var customer_name = a.childNodes[9].innerText;

		//チェックが入ったら表示、チェックが外れたら非表示
		check.addEventListener('click',function() {

			if (this.checked == true){

				document.getElementById('pd').value = payment_date;
				document.getElementById('tp').value = total_price;
				document.getElementById('tp1').value = total_price;
				document.getElementById('cn').value = customer_name;

			}else{

				document.getElementById('pd').value = "";
				document.getElementById('tp').value = "";
				document.getElementById('tp1').value = "";
				document.getElementById('cn').value = "";

			}
		});

	});
};

Comments

[m.ts10806]

回答もコードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

特に質問者自身の回答となると後から参考にする人（特に質問者さんと同じくらいの経験の人）が参考にしやすいものとなります。コードが見づらいのはあまり良くありません。
質問も回答も編集できます。

[m.ts10806]

あと
<td><input type="checkbox" id="aaa"></td>
↑ID重複してるのでここはJavaScriptからはちゃんと操作できないと思います。
「INDEXを振る」というのは「行番号のような連番を振る」と理解してもらえると良いです。
データベースのデータを引っ張ってきてるなら、そのIDとか、要は特定できる名前を付けてもらうためのつの手段です。

[sql_ga_kakenai]

code機能でソース直しました。ご指摘ありがとうございます。

以前はid="aaa"の部分からどうにかしようとしていました。仰る通りなのですが、
これは実際に操作できなかったので一つ上の<tr>タグにclass="index"を作りました。

まさにこの番号を振って処理をしたいというのが今回の肝だったので、大変インデックスの勉強になりました。ありがとうございました。

[m.ts10806]

>これは実際に操作できなかったので
どういうことでしょうか。あくまで文字列なので「操作できない」という意味が分かりません。

Answer 2

idはその名の通り要素を特定するための属性です。1画面内での重複は許されておらず、振ってしまった場合には特にJavascriptは正しく動作しません。
indexを振るなど工夫が必要ですし、行ごとに動作を制御したい場合、classを振ってそこからindexを得て処理させるなどもうひと工夫必要です。