Q&A
いまこのコードについて理解していることはどの程度で、わからないことは何なのか、もう少し掘り下げていただけないでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja" 3 xmlns:th="http://www.thymeleaf.org" 4 xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 5 layout:decorate="~{common/layout}" 6 xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity"> 7 8 <head> 9 <title>アカウント一覧</title> 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 11 </head> 12 13 <body id="page" class="staft"> 14 <!-- ヘッダー --> 15 <label layout:fragment="headerTitle" class="headerTitle">アカウント一覧</label> 16 <!-- パンクズ --> 17 <th:block layout:fragment="breadcrumb" > 18 <label class="fLeft">アカウント一覧</label> 19 </th:block> 20 21 <!-- 本文 --> 22 <div layout:fragment="contents"> 23 <script type="text/javascript"> 24 // アカウント登録画面遷移用 25 function seqNo(obj){ 26 // SEQ No 27 var seqNo = $(obj).parent().parent().find('input:hidden[name="id.seqNo"]').val(); 28 $('form.accountRegistForm').children('input:hidden[name="seqNo"]').val(seqNo); 29 // submit 30 $('form.accountRegistForm').submit(); 31 return false; 32 } 33 // ログイン履歴画面遷移用 34 function userId(obj){ 35 // userId 36 var userId = $(obj).parent().parent().find('input:hidden[name="id.userId"]').val(); 37 $('form.accountLoginHistoryListForm').children('input:hidden[name="userId"]').val(userId); 38 // submit 39 $('form.accountLoginHistoryListForm').submit(); 40 return false; 41 } 42 </script> 43 <div class='wrapTypeB'> 44 <form id='edit_form' name='edit_form' th:action="@{/maintenance/account/list}" th:object="${accountListForm}" method="post"> 45 <!-- エラーメッセージ --> 46 <th:block th:replace="common/erromsg :: errorMessage"></th:block> 47 <!-- 検索結果0件メッセージ --> 48 <th:block th:replace="common/erromsg :: noResultMessage"></th:block> 49 </form> 50 <!-- 処理完了メッセージ --> 51 <th:block th:replace="common/erromsg :: completeMessage"></th:block> 52 </div> 53 <div class='clearfix' style="margin-left: 50px; margin-top: 10px;"> 54 <div class='input'> 55 <form id='edit_form' name='edit_form' th:action="@{/maintenance/account/regist}" method="post" th:if="${#authentication.principal.mAccount.authorityKbn.value} == ${T(com.pssj.saie.manager.app.common.consts.AuthorityKbn).SYSTEM_ADMIN.getValue()}"> 56 <input type="submit" value="新規登録" class="fNone fRight w80 mainBtn" th:classappend="${@authority.isLimit('/maintenance/account/list','create')}"> 57 </form> 58 <form th:action="@{/maintenance/account/list}" th:object="${accountListForm}" method="post"> 59 <!-- 検索キー --> 60 <input type='text' th:field="*{searchKey}" maxlength="255" class='w200' th:errorclass="fieldError"> 61 <input type="hidden" name="size" th:value="*{pageWrapper.page.size}" /> 62 <input type="submit" name="search" value="検索" class="fNone fLeft w80 mL12 mainBtn" th:classappend="${@authority.isLimit('/maintenance/account/list','search')}"> 63 <th:block th:replace="common/erromsg :: formErrorMessage(formName = 'searchKey')"></th:block> 64 </form> 65 </div> 66 <div style="display:flex;width:100%"> 67 <!-- 検索結果、表示プルダウン --> 68 <th:block th:replace="common/pagination :: pageSize('/maintenance/account/list', ${accountListForm})"></th:block> 69 <!-- ﾍﾟｰｼﾞﾝｸﾞ --> 70 <th:block th:replace="common/pagination :: paginationbar(${accountListForm})"></th:block> 71 </div> 72 <div> 73 <div> 74 <table id='tablearea' class="fLeft tableareaB" th:unless="${accountListForm.pageWrapper.page.getTotalElements() == 0}"> 75 <thead> 76 <tr class='tableheader'> 77 <th scope="col" style="width:125px">ユーザーID</th> 78 <th scope="col" style="width:125px">ユーザー名</th> 79 <th scope="col" style="width: 125px;">所属</th> 80 <th scope="col" style="width: 100px;">利用権限</th> 81 <th scope="col" style="width: 150px;">画像確認許可</th> 82 <th scope="col" style="width: 150px;">最終ログイン日時</th> 83 </tr> 84 </thead> 85 <tbody th:if="${accountListForm.pageWrapper != null}"> 86 <tr th:each="line, stat : ${accountListForm.pageWrapper.page}"> 87 <td style="text-align: left"> 88 <input type="hidden" name="id.seqNo" th:value="${line.id.seqNo}" /> 89 <a class="linkTitle" href="javascript:void(0);" th:text="${line.id.userId}" onclick="seqNo(this)" th:classappend="${@authority.isLimit('/maintenance/account/list','userId')}"></a> 90 </td> 91 <td style="text-align: left" th:text="${line.userName}"></td> 92 <td style="text-align: left" th:if="${line.userDep != null}" th:text="${line.userDep}"></td> 93 <td style="text-align: left" th:if="${line.userDep == null}">-</td> 94 <td style="text-align: left" th:text="${line.authorityKbn.text}"></td> 95 <td style="text-align: left" th:if="${line.angleauthFlg == null}">許可なし</td> 96 <td style="text-align: left" th:if="${line.angleauthFlg != null}"> 97 <label th:if="${line.angleauthFlg.value} == ${T(com.pssj.saie.manager.app.common.consts.AngleauthFlg).WITHOUT_PERMISSION.getValue()}" th:text="${line.angleauthFlg.text}"> 98 </label> 99 <label th:if="${line.angleauthFlg.value} == ${T(com.pssj.saie.manager.app.common.consts.AngleauthFlg).WITH_PERMISSION.getValue()}" th:text="${line.angleauthFlg.text} + ' (' + ${#temporals.format(line.angleauthFrom, 'yyyy/MM/dd')} + ' ～ ' + ${#temporals.format(line.angleauthTo, 'yyyy/MM/dd')} + ')'"> 100 </label> 101 </td> 102 <td> 103 <input type="hidden" name="id.userId" th:value="${line.id.userId}" /> 104 <a class="linkTitle" href="javascript:void(0);" th:if="${line.lastLoginDatetime != null}" th:text="${#temporals.format(line.lastLoginDatetime, 'yyyy/MM/dd HH:mm:ss')}" onclick="userId(this)" th:classappend="${@authority.isLimit('/maintenance/account/loginHistory','search')}"> 105 </a> 106 <label th:if="${line.lastLoginDatetime == null}" th:text="ログイン履歴なし"> 107 </label> 108 </td> 109 </tr> 110 </tbody> 111 </table> 112 </div> 113 </div> 114 <!-- ﾍﾟｰｼﾞﾝｸﾞ --> 115 <th:block th:replace="common/pagination :: paginationbar(${accountListForm})"></th:block> 116 <th:block th:replace="common/pagination :: form('/maintenance/account/list', ${accountListForm})"></th:block> 117 <!-- 新規登録画面遷移用のForm --> 118 <form th:action="@{/maintenance/account/regist}" th:object="${accountRegistForm}" name="accountLRegistForm" method="post" class="accountRegistForm"> 119 <!-- SEQNo --> 120 <input type="hidden" name="seqNo" /> 121 </form> 122 <!-- ログイン履歴画面遷移用のForm --> 123 <form th:action="@{/maintenance/account/loginHistory}" th:object="${accountLoginHistoryListForm}" name="accountLoginHistoryListForm" method="post" class="accountLoginHistoryListForm"> 124 <input type="hidden" name="userId" /> 125 </form> 126 </div> 127 </div> 128 </body> 129</html> 130```このコードについて、Javascript内でどのような処理をしているのかという事が理解できません。 131具体的にこのコードはどのような処理をしているのでしょうか？ 132```Javascript 133<script type="text/javascript"> 134 // アカウント登録画面遷移用 135 function seqNo(obj){ 136 // SEQ No 137 var seqNo = $(obj).parent().parent().find('input:hidden[name="id.seqNo"]').val(); 138 $('form.accountRegistForm').children('input:hidden[name="seqNo"]').val(seqNo); 139 // submit 140 $('form.accountRegistForm').submit(); 141 return false; 142 } 143 // ログイン履歴画面遷移用 144 function userId(obj){ 145 // userId 146 var userId = $(obj).parent().parent().find('input:hidden[name="id.userId"]').val(); 147 $('form.accountLoginHistoryListForm').children('input:hidden[name="userId"]').val(userId); 148 // submit 149 $('form.accountLoginHistoryListForm').submit(); 150 return false; 151 } 152 </script>
おそらくjQueryですよね？タグを付けたほうがよいでしょう。
参考にHTMLも付加してもらったほうが回答が付きやすいとおもいます
javascriptについては自分で調べたりなどしてある程度理解できました。
しかし、jqueryの部分について基本構文である$(セレクタ).メソッド(引数);の部分がまだ理解できていない状態です。
yambejpさん
アドバイスありがとうございます。
ご指摘いただいた通り、質問を編集させていただきました。
間違ってたらすみません、サーバーサイドでjavaとかThymeleaf使っていますか？
できれば例示するHTMLは環境に依存しない生のHTMLの方がよいのですが・・・
yambejpさん
そうですねその通り、Thymeleafを使用しています。
しかし、このHTMLしかもっておらず、他のコードは所有しておりません…
申し訳ありません…
回答1件
0
ベストアンサー
Javascript内でどのような処理をしているのかという事が理解できません。
javascript
1function seqNo(obj){ 2 var seqNo = $(obj).parent().parent().find('input:hidden[name="id.seqNo"]').val(); 3 $('form.accountRegistForm').children('input:hidden[name="seqNo"]').val(seqNo); 4 $('form.accountRegistForm').submit(); 5 return false; 6}
- 状況だけhtmlの中に記載されたonclick属性で呼び出すseqNoについて
その要素自体がthisで渡されるのでobjは自分自身です
-
当該HTML要素の2個親の中にある非表示のinput要素でnameがid.seqNoの値をseqNo変数にうけ
-
accountRegistFormクラスのついたformの非表示のinput要素でnameがseqNoの値にseqNoを設定します。
-
accountRegistFormクラスのついたformをサブミットします
userId関数もほぼ同じ処理でしょう。
それぞれの要素がどういう意図を持っているかは作成者に聞いてください
逆にこれが理解できないならこの仕組での運用はやめたほうがよいでしょう
投稿2021/12/13 07:37
総合スコア116724
yambejpさん
適切なご回答ありがとうございます。
JQuery特有のメソッドやセレクタの範囲の指定方法など、他の方の質問やネットで調べてみて少しは読めた気がします。
あなたの回答
tips
プレビュー
