初心者のため、初歩的な質問になりますが、よろしくお願いいたします。
どうしてもここから次の案が浮かばず、どうか皆様、ご尽力いただければ幸いです。

問題点

HTMLで作成したTableの一つのセルの中に、掛け算の全ての積が入力されてしまいます。

求めているものとしては、
１行に対して9項目セルを作り、一の段の積が各セルに一つ入った状態で、それをfor文で９の段まで掛け算を繰り返し、九九表を完成させたいと思っています。

HTMLにはなるべく計算式を書かない様にしたいので、Java側でうまくfor文を使って何とかできないか悩んでおります。

#試したこと
Java側
・９つのインスタンスを作成（コードが読みにくいので×）
・int型⇒String型に変換し、splitメソッドを利用（複雑で一旦保留しました、、、）

HTML側
・Thymeleafのth:eachを使いループ（配列がそのまま繰り返されてしまいました）

・演算子が使えたので、１の段をth:textで表示し、*2、*3、*4、、と
記述をしていった。（HTMLに計算式を書かなくても他に方法無いか、、、？と思い保留）

#コード

Java
1
2import java.util.ArrayList;
3import java.util.List;
4
5import org.springframework.stereotype.Controller;
6import org.springframework.ui.Model;
7import org.springframework.web.bind.annotation.RequestMapping;
8import org.springframework.web.bind.annotation.RequestMethod;
9
10@Controller
11public class CountNumberWeb {
12
13	@RequestMapping(value = "/count", method = RequestMethod.GET)
14	public String kukuList(Model model) {
15
16		List<Integer> kuku = new ArrayList<>();
17
18		//　掛け算
19
20		for (int i = 1; i <= 9; i++) {
21
22		for (int j = 1; j <= 9; j++) {
23			
24　　   　kuku.add(i*j);
25
26        }
27		model.addAttribute("kuku", kuku);
28		}
29		return "count";
30	 }
31}
32

HTML
1
2<!DOCTYPE html>
3<html xmlns="http://www.w3.org/1999/xhtml"
4	xmlns:th="http://www.thymeleaf.org">
5
6<head>
7<meta charset="UTF-8">
8<title>Count</title>
9</head>
10
11<style type="text/css">
12
13tr {width: 150px;
14}
15
16table, tr, th {
17	border: 1px solid #bbb;
18}
19</style>
20
21<body>
22	<h1>九九表</h1>
23
24	<table>
25		
26	   <!--  見出し-->
27	<tr>
28　　　　 <th>九九表</th>
29		<th>1</th>
30		<th>2</th>
31		<th>3</th>
32		<th>4</th>
33		<th>5</th>
34		<th>6</th>
35		<th>7</th>
36		<th>8</th>
37		<th>9</th>
38
39	</tr>
40		
41		<!-- 2行目　１の段 -->
42
43		<tr>
44		<th>1</th>
45		 <td th:text=${kuku}></td>		
46		</tr>
47	
48	  　<!-- 3行目　2の段 -->
49
50		<tr>
51		<th>2</th>
52		 <td th:text=${kuku}></td>		
53		</tr>
54		
55	</table>
56</body>
57</html>
58

行動規範の内容に同意します

回答1件

ベストアンサー

後程私も試してみますが、わざわざJava側で計算しなくても、numbers.sequence使えばThymeleaf側だけで出来そうに思います。

※未検証

Thymeleaf
1    <table>
2
3    <tr>
4		<th>九九表</th>
5		<th th:each="i : ${#numbers.sequence(1, 9)}" th:value="${i}" th:text="${i}"></th>
6    </tr>
7    </table>

↓

Thymeleaf
1    <table>
2    <tr>
3		<th>九九表</th>
4		<th th:each="i : ${#numbers.sequence(1, 9)}" th:value="${i}" th:text="${i}"></th>
5    </tr>
6    <th:block th:each="left : ${#numbers.sequence(1, 9)}" th:value="${left}">
7	    <tr>
8			<td th:text="${left}"></td>
9		    <th:block th:each="right : ${#numbers.sequence(1, 9)}" th:value="${right}">
10				<td th:text="${left * right}"></td>
11		    </th:block>
12		</tr>
13    </th:block>
14    </table>