teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScriptにて、複数削除と自動計算がしたい。

編集履歴

質問編集履歴

8

2021/11/11 01:44

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
File without changes

7

2021/11/11 01:44

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -77,6 +77,31 @@
77
77
  <td>
78
78
  </td>
79
79
  ```
80
+ 長い為2つに分けます。
81
+ ```html5
82
+ <td>
83
+ </td>
84
+ </tr>
85
+ <tr id="shita">
86
+ <td><input>
87
+ </td>
88
+ <td>
89
+ <select class="changeList">
90
+ <option>A</option>
91
+ <option>B</option>
92
+ <option>C</option>
93
+ </select>
94
+ </td>
95
+ <td>A</td>
96
+ <td>
97
+ <button class="upList">⬆️上へ</button>　
98
+ <button class="downList">⬇️下へ</button>
99
+ </td>
100
+ <td>
101
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
102
+ </td>
103
+ </tr>
104
+ ```
80
105
  ```js
81
106
  //追加
82
107
  $("#add").on("click", function () {

6

2021/11/09 18:28

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -41,7 +41,7 @@
41
41
  </td>
42
42
  </tr>
43
43
  <tr id="shita">
44
- <td><input id="anohi" th:name="anohimita" value="">
44
+ <td><input>
45
45
  </td>
46
46
  <td>
47
47
  <select class="changeList">
@@ -60,7 +60,7 @@
60
60
  </td>
61
61
  </tr>
62
62
  <tr id="ue">
63
- <td><input>
63
+ <td><input id="anohi" name="anohimita" value="">
64
64
  </td>
65
65
  <td>
66
66
  <select class="changeList">

5

2021/11/09 18:23

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -21,19 +21,6 @@
21
21
  ### 該当のソースコード
22
22
 
23
23
  ```html5
24
- <table id="p2146-2-table">
25
- <thead>
26
- <tr>
27
- <button type="button" class="add" id="add" name="add">行追加後の画面です。
28
- </button>
29
- <th>手打ち</th>
30
- <th>リスト選択</th>
31
- <th>反映</th>
32
- <th>リスト順</th>
33
- <th>追加/削除</th>
34
- </tr>
35
- </thead>
36
-
37
24
  <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
38
25
  <tr id="ue">
39
26
  <td><input id="anohi" name="anohimita" value="">
@@ -63,7 +50,7 @@
63
50
  <option>C</option>
64
51
  </select>
65
52
  </td>
66
- <td id="darenogare">A</td>
53
+ <td>A</td>
67
54
  <td>
68
55
  <button class="upList">⬆️上へ</button>　
69
56
  <button class="downList">⬇️下へ</button>
@@ -73,7 +60,7 @@
73
60
  </td>
74
61
  </tr>
75
62
  <tr id="ue">
76
- <td><input id="anohi" th:name="anohimita" th:value="">
63
+ <td><input>
77
64
  </td>
78
65
  <td>
79
66
  <select class="changeList">
@@ -89,28 +76,6 @@
89
76
  </td>
90
77
  <td>
91
78
  </td>
92
- </tr>
93
- <tr id="shita">
94
- <td><input id="anohi" th:name="anohimita" th:value="">
95
- </td>
96
- <td>
97
- <select class="changeList">
98
- <option>A</option>
99
- <option>B</option>
100
- <option>C</option>
101
- </select>
102
- </td>
103
- <td id="darenogare">A</td>
104
- <td>
105
- <button class="upList">⬆️上へ</button>　
106
- <button class="downList">⬇️下へ</button>
107
- </td>
108
- <td>
109
- <button id="hogedelete" type="button" class="hohodelete">行削除</button>
110
- </td>
111
- </tr>
112
- </tbody>
113
- </table>
114
79
  ```
115
80
  ```js
116
81
  //追加

4

2021/11/09 18:19

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -7,10 +7,15 @@
7
7
  ※該当ソース箇所(ueとshita)
8
8
  sampleは以下になります。
9
9
  [https://codepen.io/sougoukanri/pen/GRvGvqW](https://codepen.io/sougoukanri/pen/GRvGvqW)
10
+
11
+
12
+ 前提:元画面は2行のみ表示された画面であり、本質問にあたり動作状問題となる画面はclone後の4行になった際の事象になります為本投稿は意図的に4行の状態にしております。
13
+
10
14
  ### 発生している問題・エラーメッセージ
11
15
 
12
16
  １．cloneして、行を追加している為、自動計算に関しては、正しく反映されない。
17
+ 1行目は反映される。
13
- 例：行追加後、４行目にて数値を入力してもその行には反映されない。
18
+ 問題：行追加後、3行目にて同様の要素箇所では数値を入力してもその行には反映されない。
14
19
 
15
20
  ２．parents('tr').removeであるため、対象1行のみでしか削除されない。
16
21
  ### 該当のソースコード

3

誤記修正

2021/11/09 18:09

投稿

Lorraine
Lorraine

スコア10

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

2

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

2021/11/09 17:56

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -4,77 +4,135 @@
4
4
  ※該当ソース箇所(suisoからheriumu）
5
5
  ２．行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
6
6
  ※該当ソース箇所(ueとshita)
7
+ sampleは以下になります。
8
+ [https://codepen.io/sougoukanri/pen/GRvGvqW](https://codepen.io/sougoukanri/pen/GRvGvqW)
7
9
  ### 発生している問題・エラーメッセージ
8
10
 
9
- １．cloneして、行を追加している為、自動計算に関しては、入力に対し別行へ反映されてしまう。
11
+ １．cloneして、行を追加している為、自動計算に関しては、正しく反映されない。
10
- 例：行追加後、5行目にて数値を入力したら1行目に反映される。
12
+ 例：行追加後、４行目にて数値を入力してもその行には反映されない。
13
+
11
14
  ２．parents('tr').removeであるため、対象1行のみでしか削除されない。
12
15
  ### 該当のソースコード
13
16
 
14
17
  ```html5
15
- <div>
16
- <table id='kimono'>
17
- <thead>
18
- <tr>
19
- <th>
20
- <button type="button" class="www" id="add">行追加した
21
- </button>
22
- </th>
23
- </tr>
24
- </thead>
25
- <tbody id="hogebody">
26
- <!-- 対象テーブル -->
27
- <tr id="ue">
28
- <td>山田</td>
29
- <td rowspan="2"><select>
30
- <option>gorugo</option>
31
- 　　　　　　　　　<option>sanbika</option>
32
- </select></td>
33
- <!-- suiso -->
34
- <td rowspan="2"><input id="suiso" th:name="dontakosu"
35
- th:value="*{maikeru}"></td>
36
- <td><input id="anohi" th:name="anohimita" th:value="*{karasu}">
37
- </td>
38
- <!-- heriumu -->
39
- <td><input id="darenoga" th:name="beriri" th:value="*{sudara}">
40
- </td>
41
- <td id="tikyunonetsu" th:name="haha" th:text=*{mandarin}></td>
42
- <button id="hogedelete" type="button" class="hohodelete">行削除</button>
43
- </td>
44
- </tr>
45
- <tr id="shita">
46
- <td>－</td>
47
- </tr>
48
- </tbody>
18
+ <table id="p2146-2-table">
19
+ <thead>
20
+ <tr>
21
+ <button type="button" class="add" id="add" name="add">行追加後の画面です。
22
+ </button>
23
+ <th>手打ち</th>
24
+ <th>リスト選択</th>
25
+ <th>反映</th>
26
+ <th>リスト順</th>
27
+ <th>追加/削除</th>
28
+ </tr>
29
+ </thead>
30
+
31
+ <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
32
+ <tr id="ue">
33
+ <td><input id="anohi" name="anohimita" value="">
34
+ </td>
35
+ <td>
36
+ <select class="changeList">
37
+ <option>A</option>
38
+ <option>B</option>
39
+ <option>C</option>
40
+ </select>
41
+ </td>
42
+ <td id="darenogare">A</td>
43
+ <td>
44
+ <button class="upList">⬆️上へ</button>　
45
+ <button class="downList">⬇️下へ</button>
46
+ </td>
47
+ <td>
48
+ </td>
49
+ </tr>
50
+ <tr id="shita">
51
+ <td><input id="anohi" th:name="anohimita" value="">
52
+ </td>
53
+ <td>
54
+ <select class="changeList">
55
+ <option>A</option>
56
+ <option>B</option>
57
+ <option>C</option>
58
+ </select>
59
+ </td>
60
+ <td id="darenogare">A</td>
61
+ <td>
62
+ <button class="upList">⬆️上へ</button>　
63
+ <button class="downList">⬇️下へ</button>
64
+ </td>
65
+ <td>
66
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
67
+ </td>
68
+ </tr>
69
+ <tr id="ue">
70
+ <td><input id="anohi" th:name="anohimita" th:value="">
71
+ </td>
72
+ <td>
73
+ <select class="changeList">
74
+ <option>A</option>
75
+ <option>B</option>
76
+ <option>C</option>
77
+ </select>
78
+ </td>
79
+ <td id="darenogare">A</td>
80
+ <td>
81
+ <button class="upList">⬆️上へ</button>　
82
+ <button class="downList">⬇️下へ</button>
83
+ </td>
84
+ <td>
85
+ </td>
86
+ </tr>
87
+ <tr id="shita">
88
+ <td><input id="anohi" th:name="anohimita" th:value="">
89
+ </td>
90
+ <td>
91
+ <select class="changeList">
92
+ <option>A</option>
93
+ <option>B</option>
94
+ <option>C</option>
95
+ </select>
96
+ </td>
97
+ <td id="darenogare">A</td>
98
+ <td>
99
+ <button class="upList">⬆️上へ</button>　
100
+ <button class="downList">⬇️下へ</button>
101
+ </td>
102
+ <td>
103
+ <button id="hogedelete" type="button" class="hohodelete">行削除</button>
104
+ </td>
105
+ </tr>
106
+ </tbody>
49
107
  </table>
50
- </div>
51
108
  ```
52
109
  ```js
110
+ //追加
111
+ $("#add").on("click", function () {
112
+ $("#p2146-2-table　> tbody > tr ").clone(true).appendTo($("#p2146-2-tbody"));
113
+ });
114
+
53
115
  //削除
54
- $(document).on("click", ".hohodelete", function() {
116
+ $(document).on("click", ".hohodelete", function () {
55
- $(this).parents('tr').remove();
117
+ $(this).parents("tr").remove();
56
- });
118
+ });
119
+
120
+ $(function () {
121
+ var value = 200;
122
+ var tagInputh = $("#anohi"); // 入力対象のinputタグID名
123
+ var tagOutput = $("#darenogare"); // 出力対象のinputタグID名
124
+ tagInputh.on("change", function () {
125
+ var str = $(this).val();
126
+ var num = Number(str.replace(/[^0-9]/g, "")); // 整数以外の文字列を削除
127
+ $(this).val(num);
128
+ if (num != 0) {
57
- //追加
129
+ //計算のみ
130
+ var price = num * value;
58
- $("#add").on("click", function() {
131
+ tagOutput.val(price);
59
- $("#kimono> tbody > tr:lt(2)").clone(true).appendTo(
60
- $("#hogebody"));
132
+ $("#darenogare").text(price);
133
+ }
61
- });
134
+ });
62
- //計算
63
- $(function() {
64
- var value = 20000;
65
- var tagInputh = $('#suiso'); // 入力対象のinputタグID名
66
- var tagOutput = $('#darenogare'); // 出力対象のinputタグID名
67
- tagInputh.on('change', function() {
68
- var str = $(this).val();
69
- var num = Number(str.replace(/[^0-9]/g, '')); // 整数以外の文字列を削除
70
- $(this).val(num);
71
- if (num != 0) {
72
- //計算のみ
73
- var price = num * value;
74
- tagOutput.val(price);
75
- $('#darenogare').text(price);
76
- }
77
- })
135
+ });
78
136
  ```
79
137
  ### 試したこと
80
138
 

1

2021/11/09 17:48

投稿

Lorraine
Lorraine

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
3
  １．JavaScriptにて追加された行に対し、同要素をもつ5行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
4
- ※該当ソース(suisoからheriumu）
4
+ ※該当ソース箇所(suisoからheriumu）
5
5
  ２．行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
6
- ※該当ソース(ueとshita)
6
+ ※該当ソース箇所(ueとshita)
7
7
  ### 発生している問題・エラーメッセージ
8
8
 
9
9
  １．cloneして、行を追加している為、自動計算に関しては、入力に対し別行へ反映されてしまう。