質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

1994閲覧

動的フォームを作成する際のHTMLの記述方法について

tennis

総合スコア19

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/04/01 05:29

編集2020/04/01 05:33

動的フォームを作成したく悩んでおります。
添付図のような、前もって3項目は必ず入力すると決まっているものについては
データベースに登録するところまで完成しています。
下記のコードを書きました。
イメージ説明

HTML

1<form th:action="@{/insert}" method="post"> 2 3 <div> 4 名前<input type="text" name="teacherList[0].name" /> 5 科目<input type="text" name="teacherList[0].subject" /> 6 </div> 7 <div> 8 名前<input type="text" name="teacherList[1].name" /> 9 科目<input type="text" name="teacherList[1].subject" /> 10 </div> 11 <div> 12 名前<input type="text" name="teacherList[2].name" /> 13 科目<input type="text" name="teacherList[2].subject" /> 14 </div> 15 <input type="submit" value="送信" /> 16 17 </form>

Teacher

1@Data 2public class Teacher { 3 4 private Integer id; 5 private String name; 6 private String subject; 7}

TeacherForm

1@Data 2public class TeacherForm { 3 4 private List<Teacher> teacherList; 5}

TeaherController

1@Controller 2@RequestMapping("/") 3public class TeacherController { 4 5 @Autowired 6 private TeacherRepository teacher; 7 8 @RequestMapping("") 9 public String index() { 10 return "index"; 11 } 12 13 @RequestMapping("/insert") 14 public String insert(TeacherForm teacherForm) { 15 for(Teacher student : teacherForm.getTeacherList()) { 16 student.setName(student.getName()); 17 student.setSubject(student.getSubject()); 18 teacher.insert(student); 19 } 20 return "index"; 21 } 22}

TeacherRepository

1@Repository 2public class TeacherRepository { 3 4 @Autowired 5 private NamedParameterJdbcTemplate template; 6 7 public void insert(Teacher teacher) { 8 String sql = "insert into teachers(name,subject)values(:name,:subject)"; 9 SqlParameterSource param = new BeanPropertySqlParameterSource(teacher); 10 template.update(sql, param); 11 } 12} 13

困っていること

上記のコードに加え、+ボタンとーボタンを付け加えた以下のようなものを作成しました。
イメージ説明

これを作成したことにより、html側のinputの数が変化してしまうため、
予め、teacherList[0].nameなどとできず、どのように書いたらいいかわかりません。

教えていただけると幸いです。
よろしくお願いいたします。

HTML

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 2<script type="text/javascript"> 3$(document).on("click", ".add", function() { 4 $(this).parent().clone(true).insertAfter($(this).parent()); 5}); 6$(document).on("click", ".del", function() { 7 var target = $(this).parent(); 8 if (target.parent().children().length > 1) { 9 target.remove(); 10 } 11}); 12</script> 13<body> 14 15 <form th:action="@{/insert}" method="post"> 16 17 <div id="input_pluralBox"> 18 <div id="input_plural"> 19 名前<input type="text" name="teacherList[0].name" /> 20 科目<input type="text" name="teacherList[0].subject" /> 21 <input type="button" value="+" class="add pluralBtn"> 22 <input type="button" value="-" class="del pluralBtn"> 23 </div> 24 </div> 25 26 <input type="submit" value="送信" /> 27 28 </form> 29 30</body> 31</html> 32

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

HTML

1<!DOCTYPE html> 2<html lang="ja" xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6</head> 7<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 8<script th:src="@{/js/teacher.js}"></script> 9<body> 10 11 <form th:action="@{/insert}" method="post"> 12 13 <div id="parent"> 14 名前<input type="text" name="teacherList[0].name" class="name"/> 15 科目<input type="text" name="teacherList[0].subject" class="subject"/> 16 </div> 17 18 <input type="button" value="追加" id="add"> 19 20 <input type="submit" value="送信" /> 21 22 </form> 23 24</body> 25</html>

JavaScript

1$(function(){ 2 $("#add").on('click',function(){ 3 var count = document.getElementsByClassName("name").length; 4 var parent = document.getElementById("parent"); 5 6 var input1 = document.createElement("input"); 7 input1.setAttribute("type","text"); 8 input1.setAttribute("name","teacherList[" + count + "].name"); 9 input1.setAttribute("class","name"); 10 11 var input2 = document.createElement("input"); 12 input2.setAttribute("type","text"); 13 input2.setAttribute("name","teacherList[" + count + "].subject"); 14 input2.setAttribute("class","subject"); 15 16 var input3 = document.createElement("input"); 17 input3.setAttribute("type","button"); 18 input3.setAttribute("value","削除"); 19 input3.setAttribute("id","del"); 20 21 var child = document.createElement("div"); 22 child.appendChild(document.createTextNode("名前")) 23 child.appendChild(input1); 24 child.appendChild(document.createTextNode("科目")) 25 child.appendChild(input2); 26 child.appendChild(input3); 27 child = parent.appendChild(child) 28 29 if(count === 1) { 30 $("#add").hide(); 31 } 32 $("#del").on('click',function(){ 33 if(child.hasChildNodes) { 34 child.remove(); 35 } 36 $("#add").show(); 37 }) 38 }); 39});

このように記述したところ解決しました。

投稿2020/04/02 05:02

編集2020/04/02 05:07
tennis

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

以下のようにfor文を使ってループしてみるのはどうですか?

<tr th:each="customer : ${customers}" th:object="${customer}"> <td th:text="*{id}">100</td> <td th:text="*{lastName}"></td> <td th:text="*{firstName}"></td> </tr>

参考に
https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482

投稿2020/04/01 12:53

encho

総合スコア182

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tennis

2020/04/02 05:07

解答ありがとうございます。記述は異なるのですが解決しました。ご協力ありがとうございます。
encho

2020/04/02 06:00

解決したようでよかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問