Javascript(JQuery)の処理について

回答率: 85.48%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ JavaScriptに関する質問

Q&A

解決済

1回答

1029閲覧

Javascript(JQuery)の処理について

総合スコア2

0グッド

1クリップ

投稿2021/12/13 04:41

編集2021/12/13 07:18

0

1

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>

2021/12/13 04:54

いまこのコードについて理解していることはどの程度で、わからないことは何なのか、もう少し掘り下げていただけないでしょうか？

2021/12/13 04:58

おそらくjQueryですよね？タグを付けたほうがよいでしょう。参考にHTMLも付加してもらったほうが回答が付きやすいとおもいます

2021/12/13 07:13

javascriptについては自分で調べたりなどしてある程度理解できました。しかし、jqueryの部分について基本構文である$(セレクタ).メソッド(引数);の部分がまだ理解できていない状態です。

2021/12/13 07:17

yambejpさんアドバイスありがとうございます。ご指摘いただいた通り、質問を編集させていただきました。

2021/12/13 07:22

間違ってたらすみません、サーバーサイドでjavaとかThymeleaf使っていますか？できれば例示するHTMLは環境に依存しない生のHTMLの方がよいのですが・・・

2021/12/13 07:28

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

総合スコア114814

2021/12/13 23:44

yambejpさん適切なご回答ありがとうございます。 JQuery特有のメソッドやセレクタの範囲の指定方法など、他の方の質問やネットで調べてみて少しは読めた気がします。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

関連した質問

トップ JavaScriptに関する質問

Javascript(JQuery)の処理について

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【サポート業務のお知らせ】ゴールデンウィーク休業につき下記の日程で、お問い合わせ等のサポート業務をお休みいたします。 2024/04/27(土)~2024/04/29(月) 2024/05/03(金)〜2024/05/06(月) なお期間中もサポートへのお問い合わせは受け付けております。

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る