質問編集履歴

3

2022/02/02 03:43

投稿

meron88
meron88

スコア50

test CHANGED
File without changes
test CHANGED
@@ -1,257 +1,132 @@
1
1
  ### 前提・実現したいこと
2
-
3
- ・選択ボタンをクリックされたものを選択済みのテーブルにデータを表示させるという動きを作成しているのですが、
2
+ **選択ボタン**をクリックされたものを選択済みのテーブルにデータを表示させるという動きを作成しているのですが、
4
-
5
- 一度選択ボタンをクリックされたメニューはボタンを非活性にし、
3
+ 一度**選択ボタン**をクリックされたメニューはボタンを非活性にし、
6
-
7
- もし選択済みテーブルの解除ボタンをクリックしたら、クリックされたデータの選択ボタンを再度使用できるような作りをしたいのですが、
4
+ もし選択済みテーブルの**解除ボタン(グレーのボタン)**をクリックしたら、クリックされたデータの**選択ボタン(緑色のボタン)**を再度使用できるような作りをしたいのですが、
8
-
9
-
10
5
 
11
6
  現在だと非活性はできるのですが、解除ボタンを押した際に、再度選択ボタンを使用できるようになっていません。
7
+ js初心者の為、データの移動等いいやり方が思いつきません。
8
+ 皆様の知恵をお貸しいただきたいです。よろしくお願いいたします。
12
9
 
13
- js初心者の為、データの移動等いいやり方が思いつきません。
14
-
15
- 皆様の知恵をお貸しいただきたいです。よろしくお願いいたします。
16
10
 
17
11
 
18
12
 
19
13
  ### 該当のソースコード
20
14
 
21
-
22
-
23
15
  ```html
24
-
25
16
  <div class="container table-responsive mb-3" style="max-height: 60vh; overflow-auto: scroll;">
26
-
27
17
  <table class="table table-hover table-bordered">
28
-
29
18
  <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
30
-
31
19
  <tr>
32
-
33
20
  <th scope="col" class="text-center">選択</th>
34
-
35
21
  <th scope="col" class="text-center">メニュー名</th>
36
-
37
22
  <th scope="col" class="text-center">メニューCD</th>
38
-
39
23
  </tr>
40
-
41
24
  </thead>
42
-
43
25
  <tbody>
44
-
45
26
  <tr>
46
-
47
27
  <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
48
-
49
28
  <td>カレー</td>
50
-
51
29
  <td>A11</td>
52
-
53
30
  </tr>
54
-
55
31
  <tr>
56
-
57
32
  <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
58
-
59
33
  <td>ハンバーグ</td>
60
-
61
34
  <td>A12</td>
62
-
63
35
  </tr>
64
-
65
36
  <tr>
66
-
67
37
  <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
68
-
69
38
  <td>カツ丼</td>
70
-
71
39
  <td>B3</td>
72
-
73
40
  </tr>
74
-
75
41
  <tr>
76
-
77
42
  <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
78
-
79
43
  <td>焼き魚</td>
80
-
81
44
  <td>C1</td>
82
-
83
45
  </tr>
84
-
85
46
  </tbody>
86
-
87
47
  </table>
88
-
89
48
  </div>
90
49
 
91
-
92
-
93
50
  <h5>選択済み店舗</h5>
94
-
95
51
  <div class="container table-responsive" style="max-height: 60vh; overflow-auto: scroll;">
96
-
97
52
  <table class="table table-hover table-bordered" id="targetTable">
98
-
99
53
  <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
100
-
101
54
  <tr>
102
-
103
55
  <th scope="col" class="text-center">解除</th>
104
-
105
56
  <th scope="col" class="text-center">メニュー名</th>
106
-
107
57
  <th scope="col" class="text-center">メニューCD</th>
108
-
109
58
  </tr>
110
-
111
59
  </thead>
112
-
113
60
  <tbody>
114
-
115
61
  </tbody>
116
-
117
62
  </table>
118
-
119
63
  </div>
120
-
121
64
  ```
122
-
123
65
  ```javaScript
124
-
125
66
  <script type="application/javascript">
126
-
127
-
128
67
 
129
68
  function selectStore(obj) {
130
69
 
131
-
132
-
133
70
  let Row = obj.closest('tr')
134
-
135
71
  let Cells = Row.getElementsByTagName("td")
136
-
137
72
  let name = Cells[1].innerText
138
-
139
73
  let code = Cells[2].innerText
140
-
141
74
  this.newRow(name, code)
142
-
143
75
  obj.disabled = true
144
-
145
-
146
76
 
147
77
  }
148
78
 
149
-
150
-
151
79
  function newRow(name, code) {
152
80
 
153
-
154
-
155
81
  let table = document.getElementById('targetTable')
156
-
157
82
  let newRow = table.insertRow()
158
-
159
83
  let btn = newRow.insertCell(0)
160
-
161
84
  newRow.innerHTML = '<td style="text-align: center;"><button class="btn btn-secondary ml-2 RowBtn" type="button" onclick="deleteStore(this)">解除</button></td>'
162
85
 
163
-
164
-
165
86
  let newCell = newRow.insertCell(1)
166
-
167
87
  let newText = document.createTextNode(name)
168
-
169
88
  newCell.setAttribute("id", "selectName")
170
-
171
89
  newCell.appendChild(newText)
172
90
 
173
-
174
-
175
91
  newCell = newRow.insertCell(2)
176
-
177
92
  newText = document.createTextNode(code)
178
-
179
93
  newCell.setAttribute("id", "selectCd")
180
-
181
94
  newCell.appendChild(newText)
182
95
 
183
-
184
-
185
96
  const input = document.createElement("input")
186
-
187
97
  input.setAttribute("type", "hidden")
188
-
189
98
  input.setAttribute("name", "menu_name[]")
190
-
191
99
  input.setAttribute("class", "menuName")
192
-
193
100
  input.value = name
194
-
195
101
  document.getElementById("inputForm").appendChild(input)
196
102
 
197
-
198
-
199
103
  const input2 = document.createElement("input")
200
-
201
104
  input2.setAttribute("type", "hidden")
202
-
203
105
  input2.setAttribute("name", "menu_cd[]")
204
-
205
106
  input2.setAttribute("class", "menuCd")
206
-
207
107
  input2.value = code
208
-
209
108
  document.getElementById("inputForm").appendChild(input2)
210
-
211
-
212
109
 
213
110
  }
214
111
 
215
-
216
-
217
112
  function deleteStore(obj) {
218
-
219
113
  let tr = obj.parentNode.parentNode;
220
-
221
114
  tr.parentNode.deleteRow(tr.sectionRowIndex);
222
115
 
223
-
224
-
225
116
  let Row = obj.closest('tr')
226
-
227
117
  let Cells = Row.getElementsByTagName("td")
228
-
229
118
  let deletedMenuName = Cells[1].innerText
230
-
231
119
  let deletedMenuCd = Cells[2].innerText
232
120
 
233
-
234
-
235
121
  for (let element of [...document.getElementsByClassName('menuCd')]) {
236
-
237
122
  if (element.value == deletedMenuName)
238
-
239
123
  element.remove();
240
-
241
124
  }
242
-
243
125
  for (let element of [...document.getElementsByClassName('menuName')]) {
244
-
245
126
  if (element.value == deletedMenuCd)
246
-
247
127
  element.remove();
248
-
249
128
  }
250
-
251
129
  }
252
130
 
253
-
254
-
255
131
  </script>
256
-
257
132
  ```

2

2021/12/03 18:18

投稿

meron88
meron88

スコア50

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,10 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- **選択ボタン**をクリックされたものを選択済みのテーブルにデータを表示させるという動きを作成しているのですが、
3
+ ・選択ボタンをクリックされたものを選択済みのテーブルにデータを表示させるという動きを作成しているのですが、
4
-
4
+
5
- 一度**選択ボタン**をクリックされたメニューはボタンを非活性にし、
5
+ 一度選択ボタンをクリックされたメニューはボタンを非活性にし、
6
-
6
+
7
- もし選択済みテーブルの**解除ボタン(グレーのボタン)**をクリックしたら、クリックされたデータの**選択ボタン(緑色のボタン)**を再度使用できるような作りをしたいのですが、
7
+ もし選択済みテーブルの解除ボタンをクリックしたら、クリックされたデータの選択ボタンを再度使用できるような作りをしたいのですが、
8
8
 
9
9
 
10
10
 
@@ -16,14 +16,6 @@
16
16
 
17
17
 
18
18
 
19
- ![イメージ説明](0a0dfb38687b2dbab29df05c0f2d0e6d.png)
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
19
  ### 該当のソースコード
28
20
 
29
21
 

1

タグ追加しました

2021/12/03 18:17

投稿

meron88
meron88

スコア50

test CHANGED
File without changes
test CHANGED
File without changes