質問編集履歴

1

更新

2021/07/09 04:29

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,9 +1,3 @@
1
- [参考URL]
2
-
3
- JQUERYのテーブルは下記サイトを参考にしました。
4
-
5
- http://mae.chab.in/archives/2146
6
-
7
1
  アドバイスがございましたら、よろしくお願い致します。
8
2
 
9
3
  ### 前提・実現したいこと
@@ -15,279 +9,3 @@
15
9
  ### 発生している問題
16
10
 
17
11
  画面更新しても初期値のままです。ローカル変数に設定した値を表示しません。
18
-
19
- ![イメージ説明](f4bae279c7d5341b640f39c08cc07dcb.png)
20
-
21
- ### 該当のソースコード
22
-
23
-
24
-
25
- ```ここに言語名を入力
26
-
27
- // ◆load.js
28
-
29
- window.addEventListener('DOMContentLoaded', function() {
30
-
31
-
32
-
33
- // 初期値設定
34
-
35
- // 子要素(1行目)のクラス名の値
36
-
37
- let classname_col1=100;
38
-
39
- // 子要素(1行目)のクラス時間(開始)の値
40
-
41
-   let startTimeList_col1=01;
42
-
43
- // 子要素(1行目)のクラス時間(終了)の値
44
-
45
-   let endTimeList_col1=02;
46
-
47
- // 子要素(1行目)のクラス数の値
48
-
49
- let classNaumUnits_col1=300;
50
-
51
-   const t=document.querySelector('#classRoomArea-table tbody');
52
-
53
- const tr0=t.querySelector('tr');
54
-
55
- const tr1=tr0.cloneNode(true);
56
-
57
-   t.appendChild(tr1);
58
-
59
-
60
-
61
-
62
-
63
- // tr1.querySelector('td:nth-child(1)').value = classname_col1;
64
-
65
- // 1行目 クラス名
66
-
67
- $("#demCntrlArea-tbody tr").eq(0).children('td').eq(1).text(classname_col1+' クラス');
68
-
69
- // 1行目 クラス時間 開始時間◆◇問題のコード◆◇
70
-
71
- $("#demCntrlArea-tbody tr").eq(0).children('td').eq(2).val(startTimeList_col1);
72
-
73
- // 1行目 クラス時間 終了時間
74
-
75
- $("#demCntrlArea-tbody tr").eq(0).children('td').eq(4).text(endTimeList_col1+':00');
76
-
77
- // 1行目 クラス数
78
-
79
- $("#demCntrlArea-tbody tr").eq(0).children('td').eq(5).text(classNaumUnits_col1+' 室');
80
-
81
- // マイナスボタンのみ表示、開始時間、終了時間を活性化
82
-
83
- document.getElementById("Minus").style.visibility = "visible";
84
-
85
- document.getElementById("Plus").style.visibility = "hidden";
86
-
87
- }, false);
88
-
89
-
90
-
91
- // ◆main.html
92
-
93
-
94
-
95
- <table id="classRoomArea-table">
96
-
97
- <thead>
98
-
99
- <tr>
100
-
101
- <th></th>
102
-
103
- <th>クラス名</th>
104
-
105
- <th>クラス時間</th>
106
-
107
- <th></th>
108
-
109
- <th></th>
110
-
111
- <th>クラス数</th>
112
-
113
- <!-- <th>リスト順</th> -->
114
-
115
- </tr>
116
-
117
- </thead>
118
-
119
- <tbody id="classRoomArea-tbody" style="border-top:2px #C7C7C7 solid;">
120
-
121
- <tr>
122
-
123
- <td>
124
-
125
- <!-- プラスマイナスボタン(行追加/行削除) -->
126
-
127
- <input id="classPlus" value="+" type="button" class="_classAddList" onclick="classClickPlus()">
128
-
129
- <input id="classMinus" value="-" type="button" class="_classRemoveList" collapse>
130
-
131
- </td>
132
-
133
- <td>
134
-
135
- <!-- クラス名テキストボックス -->
136
-
137
- <input id="className" class="_className" name="classNameVal[]" type="text" placeholder="" disabled>クラス
138
-
139
- </td>
140
-
141
- <td>
142
-
143
- <!-- クラス時間(開始) -->
144
-
145
- <select id="startTimeList" class="_classRoomTime" disabled>
146
-
147
- <option value="00">00</option>
148
-
149
- <option value="01">01</option>
150
-
151
- <option value="02">02</option>
152
-
153
- <option value="03">03</option>
154
-
155
- <option value="04">04</option>
156
-
157
- <option value="05">05</option>
158
-
159
- <option value="06">06</option>
160
-
161
- <option value="07">07</option>
162
-
163
- <option value="08">08</option>
164
-
165
- <option value="09">09</option>
166
-
167
- <option value="10">10</option>
168
-
169
- <option value="11">11</option>
170
-
171
- <option value="12">12</option>
172
-
173
- <option value="13">13</option>
174
-
175
- <option value="14">14</option>
176
-
177
- <option value="15">15</option>
178
-
179
- <option value="16">16</option>
180
-
181
- <option value="17">17</option>
182
-
183
- <option value="18">18</option>
184
-
185
- <option value="19">19</option>
186
-
187
- <option value="20">20</option>
188
-
189
- <option value="21">21</option>
190
-
191
- <option value="22">22</option>
192
-
193
- <option value="23">23</option>
194
-
195
- </select>
196
-
197
- :00</td>
198
-
199
- <td><span>~</span></td>
200
-
201
- <td align="left" width="150px">
202
-
203
- <!-- クラス時間(終了) -->
204
-
205
- <select id="endTimeList" class="_classRoomTime" disabled>
206
-
207
- <option value="00">00</option>
208
-
209
- <option value="01">01</option>
210
-
211
- <option value="02">02</option>
212
-
213
- <option value="03">03</option>
214
-
215
- <option value="04">04</option>
216
-
217
- <option value="05">05</option>
218
-
219
- <option value="06">06</option>
220
-
221
- <option value="07">07</option>
222
-
223
- <option value="08">08</option>
224
-
225
- <option value="09">09</option>
226
-
227
- <option value="10">10</option>
228
-
229
- <option value="11">11</option>
230
-
231
- <option value="12">12</option>
232
-
233
- <option value="13">13</option>
234
-
235
- <option value="14">14</option>
236
-
237
- <option value="15">15</option>
238
-
239
- <option value="16">16</option>
240
-
241
- <option value="17">17</option>
242
-
243
- <option value="18">18</option>
244
-
245
- <option value="19">19</option>
246
-
247
- <option value="20">20</option>
248
-
249
- <option value="21">21</option>
250
-
251
- <option value="22">22</option>
252
-
253
- <option value="23" selected>23</option>
254
-
255
- </select>
256
-
257
- :00</td>
258
-
259
- <td align="left" width="150px"><input id="classNaumUnits" class="_classNum" value="" disabled align="left" width="1px">室</td>
260
-
261
- <td></td>
262
-
263
- </tr>
264
-
265
- </tbody>
266
-
267
- </table>
268
-
269
- ```
270
-
271
-
272
-
273
- ### 試したこと
274
-
275
- ◆◇問題のコード◆◇の記述形式を色々と変えてみましたが、全て失敗しました。
276
-
277
- ```ここに言語を入力
278
-
279
- pulldown_option = document.getElementById("startTimeList").getElementsByTagName('option');
280
-
281
- let element = document.getElementById("startTimeList");
282
-
283
- let options = element.options;
284
-
285
- //element.label = element.value;
286
-
287
-
288
-
289
- // 1行目 クラス時間 開始時間◆◇問題のコード◆◇
290
-
291
- $("#demCntrlArea-tbody tr").eq(0).children('td').eq(2).options[3].selected = true;
292
-
293
- ```