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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

717閲覧

URLがないリンクを消したい

fo_sa

総合スコア2

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2023/03/29 05:50

CRUDアプリケーションで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>

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

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

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

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

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

guest

回答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

fo_sa

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問