Q&A
th:eachはHTMLの仕様には無い記述です。使用されているテンプレートエンジンを質問文に追記されてはいかがでしょう。また、回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
リマインダーを成果物として作成するにあたって、画面をHTML、JavaSprictで作成しています。テーブルの各行の編集ボタンを押すと、その行がフォームに代わるようにしているのですが、なぜか行がずれて二行になってしまいます。
検索すると、コードの中でformタグが入れ子になっている事が原因かもしれないと思いました。
編集ボタンをおしても、行がずれずにその場でリマインダーの内容を編集できるように、改善したいです。よろしくお願いいたします。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>タイトル</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Listing Reminder</h1> <table class="table"> <thead> <tr> <th>Date</th> <th>Task</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <form th:action="@{/reminder/{id}(id=*{id})}" th:method="put"> <tr th:each="ReminderViewModel:${reminderViewModelList}" th:object="${ReminderViewModel}"> <td th:id="'date_' + *{id}" th:text="*{date}"></td> <td th:id="'task_' + *{id}" th:text="*{task}"></td> <td style="display: none;" th:id="'formDate_' + *{id}"> <div class="form-group"> <input class="form-control" type="date" name="date" th:value="*{date}" /> </div> </td> <td style="display: none;" th:id="'formTask_' + *{id}"> <div class="form-group"> <input class="form-control" type="text" name="task" th:value="*{task}" /> </div> </td> <td th:id="'edit_' + *{id}"><a class="btn btn-default btn-xs" type="button" th:attr="onclick='edit(' + *{id} + ')'">編集</a></td> <td style="display: none;" th:id="'update_' + *{id}"><a class="btn btn-default btn-xs" type="submit">更新</a></td> <td th:id="'del_' + *{id}"> <form th:action="@{/reminder/{id}(id=*{id})}" th:method="delete"> <input class="btn btn-default btn-xs" type="submit" value="削除"> </form> </td> </tr> </form> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <form th:action="@{/reminder}" th:method="post"> <tr> <td> <div class="form-group"> <input class="form-control" type="date" name="date" /> </div> </td> <td> <div class="form-group"> <input class="form-control" type="text" name="task" /> </div> </td> <td> <button class="btn btn-default" type="submit">登録</button> </td> <td></td> <td></td> </tr> </form> </tbody> </table> </div> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> <script> function edit(id) { const date = document.getElementById('date_' + id); const task = document.getElementById('task_' + id); const edit = document.getElementById('edit_' + id); const del = document.getElementById('del_' + id); date.style.display = 'none'; task.style.display = 'none'; edit.style.display = 'none'; del.style.display = 'none'; const formDate = document.getElementById('formDate_' + id); const formTask = document.getElementById('formTask_' + id); const update = document.getElementById('update_' + id); formDate.style.display = 'block'; formTask.style.display = 'block'; update.style.display = 'block'; } </script> </body> </html>
thymeleaf
Spring
あたりはタグに必要そうですね。
ありがとうございます。
タグを追加しました。
結局どのように解決に至ったのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2
ヒントのみの回答で無反応で解決済みとされても困ります。
回答2件
0
コードの中でformタグが入れ子になっている事が原因かもしれない
入れ子とは
<form> <form> </form> </form>
こうなっている状態のことを言います。
ですので、入れ子にはなっていません。
問題は、
<tr> <form> </form> </tr>
こうなっていることです。
プログラムを組む以上仕様書は必ず読んでください。
読まずにプログラムを組むことは避けられません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr
0 個以上の <td> 要素または <th> 要素。 スクリプト対応要素 (<script> および <template>) も許可されています。
このように、tr の下には <th> <td> <script> および <template> のみ許可されていると書かれています。
ついでに
http://www.htmllint.net/html-lint/htmllint.html
のような文法チェックサービスの活用をして、機械的にチェックできますので、活用してください。
投稿2019/11/04 05:27
編集2019/11/04 05:31
退会済みユーザー
総合スコア0
ご回答ありがとうございます。
参考にさせて頂いて、
<tr>
<form>
</form>
</tr>
の配置を逆にして、実行しなおしたのですが、やはり同じように行がずれてしまいます。なにが原因なのでしょうか。
また間違えて、少し手を加えたあとのコードを張り付けてしまっていたので、質問のコードの部分を張り付けなおしました。よろしくお願いいたします。
ちゃんと回答読んでくれ
そうした時にうまくいかないなら、リファレンス読んでくれ。
> プログラムを組む以上仕様書は必ず読んでください。
MDNは仕様書ではないですね…。
仕様書はWHATWGにあります(下記は日本語訳)。
https://momdo.github.io/html/tables.html#the-tr-element
@think49
補足ありがとう
0
ベストアンサー
前提として、formタグの入れ子はできません。
入れ子にならなくて済むようにHTML構造を見直されたほうが良いです。
formタグは入れ子にできない＆その対処法
削除ボタンは直form送信じゃなくてJavaScriptから操作するとか、そういった工夫で回避できそうに思います。
1つしか削除できないなら、tableの外にformタグを用意しておいて押したボタンに準ずるIDを取得してきて、外のフォームタグのhiddenに設定して送信するとか、いっそAjaxにしてしまうとか。
投稿2019/11/04 08:59
総合スコア80875
あなたの回答
tips
プレビュー
