Q&ACRUDアプリケーションでURLを入力せずに追加した場合のテーブルにリンクを表示させたくないんですが、どうやっても表示されてしまいます。
補足情報（FW/ツールのバージョンなど）
・jquery 3.6.0
・bootstrap 5.1.1
試したこと
script内にif文を追加しましたが、条件の記述の時点でうまくいってませんでした。
if($('#displayUrl').val() == "") { $('#reshipi').attr("hidden",""); }
html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>献立詳細</title> <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" > <script th:src="@{/webjars/jquery/jquery.min.js}"></script> <style> body{ background-image:url('https://beiz.jp/images_M/white/white_00032.jpg'); } </style> <script th:inline="javascript"> $(function() { var now = new Date(); var year = now.getFullYear(); var month = ("00" + (now.getMonth() + 1)).slice(-2); var date = ("00" + now.getDate()).slice(-2); var today = year + "年" + month + "月" + date + "日"; var today2 = year + "-" + month + "-" + date; $('#targetDate').html(today); if($('#selectDate').val() === '') { $(".table tr").each(function() { var choose = today2; var date =$(this).children("td").eq(4).text(); if(choose != date) { $(this).attr("hidden",""); } else { $(this).removeAttr("hidden",""); } }); } else{ var cd = $('#selectDate').val(); var cdyear = cd.slice(0, 4); var cdmonth = cd.slice(5, 7); var cddate = cd.slice(8, 10); var target = cdyear + "年" + cdmonth + "月" + cddate + "日"; $('#targetDate').html(target); } $('.menusName').on('click', function() { $('#display').val($(this).next().text()); }); $('.showInsert').on('click',function() { $('#form').show(); $('#description').hide(); }); $('.showUpdate').on('click',function() { $('#menuId').val($(this).parents().children("td").first().text()); $('#menuName').val($(this).parents().children("td").eq(1).text()); $('#menuContent').val($(this).parents().children("td").eq(2).text()); $('#menuUrl').val($(this).parents().children("td").eq(3).text()); $('#menuDate').val($(this).parents().children("td").eq(4).text()); $('#form').show(); $('#description').hide(); $('.touroku').hide(); $('.kousin').show(); }); $('#cancelButton').on('click',function() { $('#form').hide(); $('#description').show(); }); $('#endButton').on('click',function() { $('#form').hide(); $('#description').show(); if($('#menuName').val() === ''){ alert('献立を入力してください'); $(this).focus(); return false; } if($('#menuName').val().match(/^[ \r\n\t]+$/)){ alert('献立はスペース以外で入力してください'); $(this).focus(); return false; } }); }); </script> </head> <body> <div class="container bg-danger-subtle"> <div class="row"> <div class="col-md-5"> <h1>献立管理表</h1> <form method="GET"> <input class="border-0 bg-transparent text-muted" type="date" id="selectDate" name="date" th:value="${getDate}"> <input th:formaction="@{/select}" type="submit" id="selectionDate" value="検索"> </form> <br> <h2><p style="text-align:center" id="targetDate"></p></h2> <div style="text-align:right"> <input class="btn btn-outline-dark btn-light rounded-circle showInsert" type="button" value="＋"> </div> <table class="table table-light border border-dark" id="menuTable"> <br> <tr th:each="mlist : ${menulist}"> <td class="menusId" id="targetId" th:text="${mlist.id}" hidden></td> <td class="menusName" id="targetMenu"><a href="#" class="link-dark" th:text="${mlist.menu}"></a></td> <td class="menusContent" id="targetContent" th:text="${mlist.content}" hidden></td> <td class="menusUrl" id="targetUrl" th:text="${mlist.url}" hidden></td> <td class="menusDate" id="targetDate" th:text="${mlist.date}" hidden></td> <td> <form style="text-align:right" method="POST"> <input type="hidden" id="displayUrl" name="url" th:value="${mlist.url}"> <a name="url" th:href="${mlist.url}" target="_blank" id="reshipi" rel="noopener noreferrer">レシピへ</a> <input type="hidden" name="id" th:value="${mlist.id}"> <input type="button" class="btn btn-primary showUpdate" value="編集"> <input type="hidden" name="id" th:value="${mlist.id}"> <input type="hidden" name="date" th:value="${mlist.date}"> <input th:formaction="@{/delete}" type="submit" class="btn btn-danger" value="削除"> </form> </td> </tr> </table> </div> <div class="col-md-4" id="contentarea"> <br> <br> <b><font size="4"><p>詳細</p></font></b> <textarea name="content" cols="50" rows="25" id="display" readonly></textarea> </div> <div class="col-md-3"> <form id="form" method="POST" style="display:none"> <br> <br> <h4>登録・更新</h4> <input type="hidden" name="id" id="menuId"><br> <b><label>献立</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="menu" id="menuName"><br> <b><label>詳細</label></b></br> <textarea class="form-control input-lg border border-dark" cols="50" rows="10" name="content" id="menuContent"></textarea><br> <b><label>レシピURL</label></b></br> <input class="form-control input-lg border border-dark" type="text" name="url" id="menuUrl"><br> <b><label>日付</label></b><br> <input class="form-control input-lg border border-dark" type="date" name="date" id="menuDate"><br> <div style="text-align:right"> <input type="reset" class="btn btn-default" style="text-align:right" id="cancelButton" value="キャンセル"> <input type="reset" class="btn btn-warning" value="リセット"> <input th:formaction="@{/insert}" type="submit" class="touroku btn btn-primary" id="endButton" value="登録"> <input th:formaction="@{/update}" type="submit" class="kousin btn btn-primary" id="endButton" style="display:none" value="完了"> </div> </form> <br><br><br> <div id="description"> <h4>使い方説明</h4> <p> ○ レシピを見たい日付を選択し、<br> 検索ボタンを押すとその日のレシピが<br> 表示されます。 </p> <p> ○ レシピ名を押すとレシピの詳細を<br> 見ることが出来ます。 </p> <p> ○ レシピボタンを押すと<br> レシピのページに遷移します。 </p> <p> ○ ＋ボタンを押すとレシピを<br> 追加するフォームが出現します。 </p> <p> ○ 編集ボタンを押すとレシピ詳細を<br> 編集できます。 </p> <p> ○ 削除ボタンを押すとレシピを<br > 削除出来ます。 </p> </div> </div> </div> </div> <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script> </body> </html>
回答1件
0
自己解決
bodyのリンクを表示させてるaタグをth:blockタグで囲い、th:ifで条件を記述するとURLが無いレシピのリンクが消えました。
<th:block th:if="${mlist.url != ''}"> <a name="url" th:href="${mlist.url}" target="_blank" id="reshipi" rel="noopener noreferrer">レシピへ</a> </th:block>
投稿2023/03/29 06:24
総合スコア2
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。