質問編集履歴

8

2021/11/11 01:44

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
File without changes

7

2021/11/11 01:44

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -156,6 +156,56 @@
156
156
 
157
157
  ```
158
158
 
159
+ 長い為2つに分けます。
160
+
161
+ ```html5
162
+
163
+ <td>
164
+
165
+ </td>
166
+
167
+ </tr>
168
+
169
+ <tr id="shita">
170
+
171
+ <td><input>
172
+
173
+ </td>
174
+
175
+ <td>
176
+
177
+ <select class="changeList">
178
+
179
+ <option>A</option>
180
+
181
+ <option>B</option>
182
+
183
+ <option>C</option>
184
+
185
+ </select>
186
+
187
+ </td>
188
+
189
+ <td>A</td>
190
+
191
+ <td>
192
+
193
+ <button class="upList">⬆️上へ</button> 
194
+
195
+ <button class="downList">⬇️下へ</button>
196
+
197
+ </td>
198
+
199
+ <td>
200
+
201
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
202
+
203
+ </td>
204
+
205
+ </tr>
206
+
207
+ ```
208
+
159
209
  ```js
160
210
 
161
211
  //追加

6

2021/11/09 18:28

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -84,7 +84,7 @@
84
84
 
85
85
  <tr id="shita">
86
86
 
87
- <td><input id="anohi" th:name="anohimita" value="">
87
+ <td><input>
88
88
 
89
89
  </td>
90
90
 
@@ -122,7 +122,7 @@
122
122
 
123
123
  <tr id="ue">
124
124
 
125
- <td><input>
125
+ <td><input id="anohi" name="anohimita" value="">
126
126
 
127
127
  </td>
128
128
 

5

2021/11/09 18:23

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -44,37 +44,85 @@
44
44
 
45
45
  ```html5
46
46
 
47
+ <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
48
+
47
- <table id="p2146-2-table">
49
+ <tr id="ue">
50
+
48
-
51
+ <td><input id="anohi" name="anohimita" value="">
52
+
49
- <thead>
53
+ </td>
50
-
54
+
51
- <tr>
55
+ <td>
52
-
56
+
53
- <button type="button" class="add" id="add" name="add">行追加後の画面です。
57
+ <select class="changeList">
58
+
54
-
59
+ <option>A</option>
60
+
61
+ <option>B</option>
62
+
63
+ <option>C</option>
64
+
65
+ </select>
66
+
55
- </button>
67
+ </td>
56
-
57
- <th>手打ち</th>
68
+
58
-
59
- <th>リスト選択</th>
69
+ <td id="darenogare">A</td>
70
+
60
-
71
+ <td>
72
+
73
+ <button class="upList">⬆️上へ</button> 
74
+
75
+ <button class="downList">⬇️下へ</button>
76
+
61
- <th>反映</th>
77
+ </td>
78
+
62
-
79
+ <td>
80
+
63
- <th>リスト順</th>
81
+ </td>
64
-
65
- <th>追加/削除</th>
66
82
 
67
83
  </tr>
68
84
 
85
+ <tr id="shita">
86
+
87
+ <td><input id="anohi" th:name="anohimita" value="">
88
+
69
- </thead>
89
+ </td>
90
+
70
-
91
+ <td>
92
+
71
-
93
+ <select class="changeList">
94
+
72
-
95
+ <option>A</option>
96
+
97
+ <option>B</option>
98
+
99
+ <option>C</option>
100
+
101
+ </select>
102
+
103
+ </td>
104
+
105
+ <td>A</td>
106
+
107
+ <td>
108
+
109
+ <button class="upList">⬆️上へ</button> 
110
+
111
+ <button class="downList">⬇️下へ</button>
112
+
113
+ </td>
114
+
115
+ <td>
116
+
73
- <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
117
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
118
+
119
+ </td>
120
+
121
+ </tr>
74
122
 
75
123
  <tr id="ue">
76
124
 
77
- <td><input id="anohi" name="anohimita" value="">
125
+ <td><input>
78
126
 
79
127
  </td>
80
128
 
@@ -106,124 +154,6 @@
106
154
 
107
155
  </td>
108
156
 
109
- </tr>
110
-
111
- <tr id="shita">
112
-
113
- <td><input id="anohi" th:name="anohimita" value="">
114
-
115
- </td>
116
-
117
- <td>
118
-
119
- <select class="changeList">
120
-
121
- <option>A</option>
122
-
123
- <option>B</option>
124
-
125
- <option>C</option>
126
-
127
- </select>
128
-
129
- </td>
130
-
131
- <td id="darenogare">A</td>
132
-
133
- <td>
134
-
135
- <button class="upList">⬆️上へ</button> 
136
-
137
- <button class="downList">⬇️下へ</button>
138
-
139
- </td>
140
-
141
- <td>
142
-
143
- <button id="hogedelete" type="button" class="hohodelete">行削除</button>
144
-
145
- </td>
146
-
147
- </tr>
148
-
149
- <tr id="ue">
150
-
151
- <td><input id="anohi" th:name="anohimita" th:value="">
152
-
153
- </td>
154
-
155
- <td>
156
-
157
- <select class="changeList">
158
-
159
- <option>A</option>
160
-
161
- <option>B</option>
162
-
163
- <option>C</option>
164
-
165
- </select>
166
-
167
- </td>
168
-
169
- <td id="darenogare">A</td>
170
-
171
- <td>
172
-
173
- <button class="upList">⬆️上へ</button> 
174
-
175
- <button class="downList">⬇️下へ</button>
176
-
177
- </td>
178
-
179
- <td>
180
-
181
- </td>
182
-
183
- </tr>
184
-
185
- <tr id="shita">
186
-
187
- <td><input id="anohi" th:name="anohimita" th:value="">
188
-
189
- </td>
190
-
191
- <td>
192
-
193
- <select class="changeList">
194
-
195
- <option>A</option>
196
-
197
- <option>B</option>
198
-
199
- <option>C</option>
200
-
201
- </select>
202
-
203
- </td>
204
-
205
- <td id="darenogare">A</td>
206
-
207
- <td>
208
-
209
- <button class="upList">⬆️上へ</button> 
210
-
211
- <button class="downList">⬇️下へ</button>
212
-
213
- </td>
214
-
215
- <td>
216
-
217
- <button id="hogedelete" type="button" class="hohodelete">行削除</button>
218
-
219
- </td>
220
-
221
- </tr>
222
-
223
- </tbody>
224
-
225
- </table>
226
-
227
157
  ```
228
158
 
229
159
  ```js

4

2021/11/09 18:19

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -16,13 +16,23 @@
16
16
 
17
17
  [https://codepen.io/sougoukanri/pen/GRvGvqW](https://codepen.io/sougoukanri/pen/GRvGvqW)
18
18
 
19
+
20
+
21
+
22
+
23
+ 前提:元画面は2行のみ表示された画面であり、本質問にあたり動作状問題となる画面はclone後の4行になった際の事象になります為本投稿は意図的に4行の状態にしております。
24
+
25
+
26
+
19
27
  ### 発生している問題・エラーメッセージ
20
28
 
21
29
 
22
30
 
23
31
  1.cloneして、行を追加している為、自動計算に関しては、正しく反映されない。
24
32
 
33
+ 1行目は反映される。
34
+
25
- :行追加後、行目にて数値を入力してもその行には反映されない。
35
+ 問題:行追加後、3行目にて同様の要素箇所では数値を入力してもその行には反映されない。
26
36
 
27
37
 
28
38
 

3

誤記修正

2021/11/09 18:09

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- 1.JavaScriptにて追加された行に対し、同要素をもつ5行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
5
+ 1.JavaScriptにて追加された行に対し、同要素をもつ行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
6
-
6
+
7
- ※該当ソース箇所(suisoからheriumu)
7
+ *cloneされ行が4行の状態のものを本投稿では記載しております。追加ボタンの動作は本影響外となります。また、動作経緯の為sampleには追加の明記もあります。
8
+
9
+
8
10
 
9
11
  2.行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
10
12
 

2

拝見して頂き有難うございます。お手数おかけしました、情報を追加したものへと修正いたしました。

2021/11/09 17:56

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -10,13 +10,19 @@
10
10
 
11
11
  ※該当ソース箇所(ueとshita)
12
12
 
13
+ sampleは以下になります。
14
+
15
+ [https://codepen.io/sougoukanri/pen/GRvGvqW](https://codepen.io/sougoukanri/pen/GRvGvqW)
16
+
13
17
  ### 発生している問題・エラーメッセージ
14
18
 
15
19
 
16
20
 
17
- 1.cloneして、行を追加している為、自動計算に関しては、入力に対別行へ反映されてしまう
21
+ 1.cloneして、行を追加している為、自動計算に関しては、反映されない
18
-
22
+
19
- 例:行追加後、5行目にて数値を入力したら1に反映され
23
+ 例:行追加後、行目にて数値を入力してもその行に反映されない
24
+
25
+
20
26
 
21
27
  2.parents('tr').removeであるため、対象1行のみでしか削除されない。
22
28
 
@@ -26,131 +32,241 @@
26
32
 
27
33
  ```html5
28
34
 
29
- <div>
30
-
31
- <table id='kimono'>
32
-
33
- <thead>
34
-
35
- <tr>
36
-
37
- <th>
38
-
39
- <button type="button" class="www" id="add">行追加した
40
-
41
- </button>
42
-
43
- </th>
44
-
45
- </tr>
46
-
47
- </thead>
48
-
49
- <tbody id="hogebody">
50
-
51
- <!-- 対象テーブル -->
52
-
53
- <tr id="ue">
54
-
55
- <td>山田</td>
56
-
57
- <td rowspan="2"><select>
58
-
59
- <option>gorugo</option>
60
-
61
-          <option>sanbika</option>
62
-
63
- </select></td>
64
-
65
- <!-- suiso -->
66
-
67
- <td rowspan="2"><input id="suiso" th:name="dontakosu"
68
-
69
- th:value="*{maikeru}"></td>
70
-
71
- <td><input id="anohi" th:name="anohimita" th:value="*{karasu}">
72
-
73
- </td>
74
-
75
- <!-- heriumu -->
76
-
77
- <td><input id="darenoga" th:name="beriri" th:value="*{sudara}">
78
-
79
- </td>
80
-
81
- <td id="tikyunonetsu" th:name="haha" th:text=*{mandarin}></td>
82
-
83
- <button id="hogedelete" type="button" class="hohodelete">行削除</button>
84
-
85
- </td>
86
-
87
- </tr>
88
-
89
- <tr id="shita">
90
-
91
- <td>-</td>
92
-
93
- </tr>
94
-
95
- </tbody>
35
+ <table id="p2146-2-table">
36
+
37
+ <thead>
38
+
39
+ <tr>
40
+
41
+ <button type="button" class="add" id="add" name="add">行追加後の画面です。
42
+
43
+ </button>
44
+
45
+ <th>手打ち</th>
46
+
47
+ <th>リスト選択</th>
48
+
49
+ <th>反映</th>
50
+
51
+ <th>リスト順</th>
52
+
53
+ <th>追加/削除</th>
54
+
55
+ </tr>
56
+
57
+ </thead>
58
+
59
+
60
+
61
+ <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
62
+
63
+ <tr id="ue">
64
+
65
+ <td><input id="anohi" name="anohimita" value="">
66
+
67
+ </td>
68
+
69
+ <td>
70
+
71
+ <select class="changeList">
72
+
73
+ <option>A</option>
74
+
75
+ <option>B</option>
76
+
77
+ <option>C</option>
78
+
79
+ </select>
80
+
81
+ </td>
82
+
83
+ <td id="darenogare">A</td>
84
+
85
+ <td>
86
+
87
+ <button class="upList">⬆️上へ</button> 
88
+
89
+ <button class="downList">⬇️下へ</button>
90
+
91
+ </td>
92
+
93
+ <td>
94
+
95
+ </td>
96
+
97
+ </tr>
98
+
99
+ <tr id="shita">
100
+
101
+ <td><input id="anohi" th:name="anohimita" value="">
102
+
103
+ </td>
104
+
105
+ <td>
106
+
107
+ <select class="changeList">
108
+
109
+ <option>A</option>
110
+
111
+ <option>B</option>
112
+
113
+ <option>C</option>
114
+
115
+ </select>
116
+
117
+ </td>
118
+
119
+ <td id="darenogare">A</td>
120
+
121
+ <td>
122
+
123
+ <button class="upList">⬆️上へ</button> 
124
+
125
+ <button class="downList">⬇️下へ</button>
126
+
127
+ </td>
128
+
129
+ <td>
130
+
131
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
132
+
133
+ </td>
134
+
135
+ </tr>
136
+
137
+ <tr id="ue">
138
+
139
+ <td><input id="anohi" th:name="anohimita" th:value="">
140
+
141
+ </td>
142
+
143
+ <td>
144
+
145
+ <select class="changeList">
146
+
147
+ <option>A</option>
148
+
149
+ <option>B</option>
150
+
151
+ <option>C</option>
152
+
153
+ </select>
154
+
155
+ </td>
156
+
157
+ <td id="darenogare">A</td>
158
+
159
+ <td>
160
+
161
+ <button class="upList">⬆️上へ</button> 
162
+
163
+ <button class="downList">⬇️下へ</button>
164
+
165
+ </td>
166
+
167
+ <td>
168
+
169
+ </td>
170
+
171
+ </tr>
172
+
173
+ <tr id="shita">
174
+
175
+ <td><input id="anohi" th:name="anohimita" th:value="">
176
+
177
+ </td>
178
+
179
+ <td>
180
+
181
+ <select class="changeList">
182
+
183
+ <option>A</option>
184
+
185
+ <option>B</option>
186
+
187
+ <option>C</option>
188
+
189
+ </select>
190
+
191
+ </td>
192
+
193
+ <td id="darenogare">A</td>
194
+
195
+ <td>
196
+
197
+ <button class="upList">⬆️上へ</button> 
198
+
199
+ <button class="downList">⬇️下へ</button>
200
+
201
+ </td>
202
+
203
+ <td>
204
+
205
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
206
+
207
+ </td>
208
+
209
+ </tr>
210
+
211
+ </tbody>
96
212
 
97
213
  </table>
98
214
 
99
- </div>
100
-
101
215
  ```
102
216
 
103
217
  ```js
104
218
 
219
+ //追加
220
+
221
+ $("#add").on("click", function () {
222
+
223
+ $("#p2146-2-table > tbody > tr ").clone(true).appendTo($("#p2146-2-tbody"));
224
+
225
+ });
226
+
227
+
228
+
105
229
  //削除
106
230
 
107
- $(document).on("click", ".hohodelete", function() {
231
+ $(document).on("click", ".hohodelete", function () {
108
-
232
+
109
- $(this).parents('tr').remove();
233
+ $(this).parents("tr").remove();
110
-
234
+
111
- });
235
+ });
236
+
237
+
238
+
112
-
239
+ $(function () {
240
+
241
+ var value = 200;
242
+
243
+ var tagInputh = $("#anohi"); // 入力対象のinputタグID名
244
+
245
+ var tagOutput = $("#darenogare"); // 出力対象のinputタグID名
246
+
247
+ tagInputh.on("change", function () {
248
+
249
+ var str = $(this).val();
250
+
251
+ var num = Number(str.replace(/[^0-9]/g, "")); // 整数以外の文字列を削除
252
+
253
+ $(this).val(num);
254
+
255
+ if (num != 0) {
256
+
113
- //追加
257
+ //計算のみ
258
+
114
-
259
+ var price = num * value;
260
+
115
- $("#add").on("click", function() {
261
+ tagOutput.val(price);
116
-
117
- $("#kimono> tbody > tr:lt(2)").clone(true).appendTo(
262
+
118
-
119
- $("#hogebody"));
263
+ $("#darenogare").text(price);
264
+
120
-
265
+ }
266
+
121
- });
267
+ });
122
-
123
- //計算
268
+
124
-
125
- $(function() {
126
-
127
- var value = 20000;
128
-
129
- var tagInputh = $('#suiso'); // 入力対象のinputタグID名
130
-
131
- var tagOutput = $('#darenogare'); // 出力対象のinputタグID名
132
-
133
- tagInputh.on('change', function() {
134
-
135
- var str = $(this).val();
136
-
137
- var num = Number(str.replace(/[^0-9]/g, '')); // 整数以外の文字列を削除
138
-
139
- $(this).val(num);
140
-
141
- if (num != 0) {
142
-
143
- //計算のみ
144
-
145
- var price = num * value;
146
-
147
- tagOutput.val(price);
148
-
149
- $('#darenogare').text(price);
150
-
151
- }
152
-
153
- })
269
+ });
154
270
 
155
271
  ```
156
272
 

1

2021/11/09 17:48

投稿

Lorraine
Lorraine

スコア10

test CHANGED
File without changes
test CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
  1.JavaScriptにて追加された行に対し、同要素をもつ5行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
6
6
 
7
- ※該当ソース(suisoからheriumu)
7
+ ※該当ソース箇所(suisoからheriumu)
8
8
 
9
9
  2.行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
10
10
 
11
- ※該当ソース(ueとshita)
11
+ ※該当ソース箇所(ueとshita)
12
12
 
13
13
  ### 発生している問題・エラーメッセージ
14
14