質問編集履歴

8

誤字

2021/08/16 01:52

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -3,8 +3,6 @@
3
3
  こんにちは。
4
4
 
5
5
  javascriptでJQUERYのテーブルを実装しました。テーブル自体は出来ましたが、cloneした行をappendすると、1行目と2行目を縦並びすることを期待しましたが、1行目に横並びで表示しました。
6
-
7
- ![イメージ説明](e0872c536b0ecf3d31629ae5db24c9d2.png)
8
6
 
9
7
 
10
8
 

7

不要な情報を削除

2021/08/16 01:52

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -24,11 +24,11 @@
24
24
 
25
25
  ### 状況の追記4
26
26
 
27
- フォルダ構成は下記です。htmlに記載しています。
28
-
29
- JSフォルダ内にanimalArea.js、jquery-3.6.0.min.js
27
+ JSanimalArea.js、jquery-3.6.0.min.js
30
28
 
31
29
  JSフォルダと同じ階層に、main.html
30
+
31
+ ※htmlは削除しました。
32
32
 
33
33
  ブラウザはchromeまたはedgeです。
34
34
 
@@ -38,281 +38,9 @@
38
38
 
39
39
  main.html
40
40
 
41
- ```html
41
+ animalArea.js
42
42
 
43
- <!DOCTYPE html>
44
-
45
- <head>
46
-
47
- <meta charset="utf-8"/>
48
-
49
- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
50
-
51
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
52
-
53
- <title>動物園</title>
54
-
55
- <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="animalManDisp.css"/>
56
-
57
- <script src="./js/jquery-3.6.0.min.js"></script>
58
-
59
- <script src="./js/animalArea.js"></script>
60
-
61
- </head>
62
-
63
- <body>
64
-
65
- <div class="row">
66
-
67
- <div class="panel">
68
-
69
-
70
-
71
- <div class="panel-body">
72
-
73
- <div class="panel-body-btm">
74
-
75
- <div class="form_animalCntrlArea">
76
-
77
- <table id="animalCntrlArea-table">
78
-
79
- <thead>
80
-
81
- <tr>
82
-
83
- <th>1</th>
84
-
85
- <th>2</th>
86
-
87
- <th>3</th>
88
-
89
- <th>4</th>
90
-
91
- <th>5</th>
92
-
93
- <th>6</th>
94
-
95
- <th>7</th>
96
-
97
- </tr>
98
-
99
- </thead>
43
+ ※isは該当コード行のみに修正します。
100
-
101
- <tbody id="animalCntrlArea-tbody" style="border-top:2px #C7C7C7 solid;">
102
-
103
- <tr>
104
-
105
- <td>
106
-
107
- <input id="animalPlus" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
108
-
109
- </td>
110
-
111
- <td>
112
-
113
- <input id="animalMinus" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
114
-
115
- </td>
116
-
117
- <td>
118
-
119
- <input id="animalandunderlimit" class="thresholdText" name="thresholdVal[]" type="text" placeholder="" disabled>
120
-
121
- </td>
122
-
123
- <td>
124
-
125
- <select id="startTimeList" class="animalCntrlTime">
126
-
127
- <option value="00">00</option>
128
-
129
- <option value="01">01</option>
130
-
131
- <option value="02">02</option>
132
-
133
- <option value="03">03</option>
134
-
135
- </select>
136
-
137
- </td>
138
-
139
- <td><span>~</span></td>
140
-
141
- <td align="left" width="150px">
142
-
143
- <select id="endTimeList" class="animalCntrlTime">
144
-
145
- <option value="00">00</option>
146
-
147
- <option value="01">01</option>
148
-
149
- <option value="02">02</option>
150
-
151
- <option value="03">03</option>
152
-
153
- </select>
154
-
155
- </td>
156
-
157
- <td align="left" width="150px"><input id="NaumUnits" class="Num" value="" disabled align="left" width="1px"></td>
158
-
159
- <td width="10px"></td>
160
-
161
- </tr>
162
-
163
- </tbody>
164
-
165
- </table>
166
-
167
- <button class="demCntrlSetBtn">AAAA</button>
168
-
169
- </div>
170
-
171
- <div class="form_fishMngArea">
172
-
173
- <div id="demCntrlLabel"><span>NAME1</span></div>
174
-
175
- <button class="fishMngCsvDLBtn">NAME1DL</button>
176
-
177
- <div class="fishMnglLabel_border"></div>
178
-
179
-
180
-
181
- <div class="scroll_fishMngArea-table">
182
-
183
- <table id="fishMngArea-table">
184
-
185
- <thead>
186
-
187
- <tr>
188
-
189
- <th></th>
190
-
191
- <th class="_colum_title">aa</th>
192
-
193
- <th class="_colum_title">bb</th>
194
-
195
- <th class="_colum_title">cc</th>
196
-
197
- <th class="_colum_title">dd</th>
198
-
199
- <th class="_colum_title">ee</th>
200
-
201
- <th class="_colum_fishAreaTblSpace">&nbsp;</th>
202
-
203
- <th class="_colum_title" text-align="left">00</th>
204
-
205
- <th class="_colum_fishAreaTblSpace">&nbsp;</th>
206
-
207
- <th class="_colum_title" style="padding-right: 0.7vw;">ff</th>
208
-
209
- </tr>
210
-
211
- </thead>
212
-
213
- <tbody id="fishMngArea-tbody" style="border-top:2px #C7C7C7 solid;">
214
-
215
- <tr>
216
-
217
- <td>
218
-
219
- <input id="fishPlus" value="+" type="button" class="fishAddList" onclick="fishClickPlus()">
220
-
221
- <input id="fishMinus" value="-" type="button" class="fishRemoveList" collapse>
222
-
223
- </td>
224
-
225
- <td>
226
-
227
- <INPUT id="fishName" value="A">
228
-
229
- </td>
230
-
231
- <td>
232
-
233
- <select class="gon" style="border:1px gray solid" onchange="fishDemAbilLstChange(this)">
234
-
235
- <option value=0">0</option>
236
-
237
- </select>
238
-
239
- </td>
240
-
241
- <td>
242
-
243
- <select id="1" style="border:1px gray solid;" onchange="fishDemMotLstChange(this)">
244
-
245
- <option value="1">1</option>
246
-
247
- </select>
248
-
249
- </td>
250
-
251
- <td>
252
-
253
- <select id="fishStartTimeList" onchange="fishTimeListChange(this,1)">
254
-
255
- <option value="00:00">00:00</option>
256
-
257
- <option value="01:00">01:00</option>
258
-
259
- <option value="02:00">02:00</option>
260
-
261
- <option value="03:00">03:00</option>
262
-
263
- </select>
264
-
265
- </td>
266
-
267
- <td>
268
-
269
- <select id="fishEndTimeList" onchange="fishTimeListChange(this,2)">
270
-
271
- <option value="00:00">00:00</option>
272
-
273
- <option value="01:00">01:00</option>
274
-
275
- <option value="02:00">02:00</option>
276
-
277
- <option value="03:00">03:00</option>
278
-
279
- <option value="23:00">23:00</option>
280
-
281
- </select>
282
-
283
- </td>
284
-
285
- <td class="_colum_fishAreaTblSpace">&nbsp;</td>
286
-
287
- <td></td>
288
-
289
- <td class="_colum_fishAreaTblSpace">&nbsp;</td>
290
-
291
- <td><INPUT type="text" id="roomCnt" value="0" disabled style="padding-right: 0.7vw;"></td>
292
-
293
- </tr>
294
-
295
- </tbody>
296
-
297
- </table>
298
-
299
- </div>
300
-
301
- </div>
302
-
303
- </div>
304
-
305
- </div>
306
-
307
- </div>
308
-
309
- </div>
310
-
311
- </body>
312
-
313
- ```
314
-
315
- animalArea.js
316
44
 
317
45
  本jsに5行表示するコードがあります。addEventListenerをコメントアウトすると、readyメソッドで初期表示の2行表示します。
318
46
 
@@ -348,26 +76,6 @@
348
76
 
349
77
 
350
78
 
351
- let animalandlimit_col1=100;
352
-
353
- let starttime_col1=02;
354
-
355
- let endtime_col1=03;
356
-
357
- let boilnaumunits_col1=300;
358
-
359
-
360
-
361
- let animalandlimit_col2=200;
362
-
363
- let starttime_col2=04;
364
-
365
- let endtime_col2=05;
366
-
367
- let boilnaumunits_col2=400;
368
-
369
-
370
-
371
79
  // 問題のコードです
372
80
 
373
81
  let t=$('#animalCntrlArea-tbody>tr');
@@ -378,32 +86,6 @@
378
86
 
379
87
 
380
88
 
381
- // 1col
382
-
383
- $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(2).text(animalandlimit_col1);
384
-
385
- $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(3).find("option[value='01']").attr('selected', true);
386
-
387
- $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(5).find("option[value='02']").attr('selected', true);
388
-
389
- $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(6).text(boilnaumunits_col1);
390
-
391
-
392
-
393
- // 2col
394
-
395
- $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(2).text(animalandlimit_col2);
396
-
397
- $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(3).find("option[value='03']").attr('selected', true);
398
-
399
- $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(5).find("option[value='04']").attr('selected', true);
400
-
401
- $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(6).text(boilnaumunits_col2);
402
-
403
-
404
-
405
-
406
-
407
89
  }, false);
408
90
 
409
91
 

6

状況の追記1~3を削除して、状況の追記4 再現するコードを記載

2021/07/09 02:42

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -22,314 +22,390 @@
22
22
 
23
23
 
24
24
 
25
-
26
-
27
- ### 該当ソースコード
25
+ ### 状況追記4
26
+
28
-
27
+ フォルダ構成は下記です。htmlに記載しています。
28
+
29
-
29
+ JSフォルダ内にanimalArea.js、jquery-3.6.0.min.js
30
+
31
+ JSフォルダと同じ階層に、main.html
32
+
33
+ ブラウザはchromeまたはedgeです。
34
+
35
+ 【手順】
36
+
37
+ htmlをダブルクリックして起動しますと、5行表示を再現します。
38
+
39
+ main.html
40
+
41
+ ```html
42
+
43
+ <!DOCTYPE html>
44
+
45
+ <head>
46
+
47
+ <meta charset="utf-8"/>
48
+
49
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
50
+
51
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
52
+
53
+ <title>動物園</title>
54
+
55
+ <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="animalManDisp.css"/>
56
+
57
+ <script src="./js/jquery-3.6.0.min.js"></script>
58
+
59
+ <script src="./js/animalArea.js"></script>
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+ <div class="row">
66
+
67
+ <div class="panel">
68
+
69
+
70
+
71
+ <div class="panel-body">
72
+
73
+ <div class="panel-body-btm">
74
+
75
+ <div class="form_animalCntrlArea">
76
+
77
+ <table id="animalCntrlArea-table">
78
+
79
+ <thead>
80
+
81
+ <tr>
82
+
83
+ <th>1</th>
84
+
85
+ <th>2</th>
86
+
87
+ <th>3</th>
88
+
89
+ <th>4</th>
90
+
91
+ <th>5</th>
92
+
93
+ <th>6</th>
94
+
95
+ <th>7</th>
96
+
97
+ </tr>
98
+
99
+ </thead>
100
+
101
+ <tbody id="animalCntrlArea-tbody" style="border-top:2px #C7C7C7 solid;">
102
+
103
+ <tr>
104
+
105
+ <td>
106
+
107
+ <input id="animalPlus" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
108
+
109
+ </td>
110
+
111
+ <td>
112
+
113
+ <input id="animalMinus" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
114
+
115
+ </td>
116
+
117
+ <td>
118
+
119
+ <input id="animalandunderlimit" class="thresholdText" name="thresholdVal[]" type="text" placeholder="" disabled>
120
+
121
+ </td>
122
+
123
+ <td>
124
+
125
+ <select id="startTimeList" class="animalCntrlTime">
126
+
127
+ <option value="00">00</option>
128
+
129
+ <option value="01">01</option>
130
+
131
+ <option value="02">02</option>
132
+
133
+ <option value="03">03</option>
134
+
135
+ </select>
136
+
137
+ </td>
138
+
139
+ <td><span>~</span></td>
140
+
141
+ <td align="left" width="150px">
142
+
143
+ <select id="endTimeList" class="animalCntrlTime">
144
+
145
+ <option value="00">00</option>
146
+
147
+ <option value="01">01</option>
148
+
149
+ <option value="02">02</option>
150
+
151
+ <option value="03">03</option>
152
+
153
+ </select>
154
+
155
+ </td>
156
+
157
+ <td align="left" width="150px"><input id="NaumUnits" class="Num" value="" disabled align="left" width="1px"></td>
158
+
159
+ <td width="10px"></td>
160
+
161
+ </tr>
162
+
163
+ </tbody>
164
+
165
+ </table>
166
+
167
+ <button class="demCntrlSetBtn">AAAA</button>
168
+
169
+ </div>
170
+
171
+ <div class="form_fishMngArea">
172
+
173
+ <div id="demCntrlLabel"><span>NAME1</span></div>
174
+
175
+ <button class="fishMngCsvDLBtn">NAME1DL</button>
176
+
177
+ <div class="fishMnglLabel_border"></div>
178
+
179
+
180
+
181
+ <div class="scroll_fishMngArea-table">
182
+
183
+ <table id="fishMngArea-table">
184
+
185
+ <thead>
186
+
187
+ <tr>
188
+
189
+ <th></th>
190
+
191
+ <th class="_colum_title">aa</th>
192
+
193
+ <th class="_colum_title">bb</th>
194
+
195
+ <th class="_colum_title">cc</th>
196
+
197
+ <th class="_colum_title">dd</th>
198
+
199
+ <th class="_colum_title">ee</th>
200
+
201
+ <th class="_colum_fishAreaTblSpace">&nbsp;</th>
202
+
203
+ <th class="_colum_title" text-align="left">00</th>
204
+
205
+ <th class="_colum_fishAreaTblSpace">&nbsp;</th>
206
+
207
+ <th class="_colum_title" style="padding-right: 0.7vw;">ff</th>
208
+
209
+ </tr>
210
+
211
+ </thead>
212
+
213
+ <tbody id="fishMngArea-tbody" style="border-top:2px #C7C7C7 solid;">
214
+
215
+ <tr>
216
+
217
+ <td>
218
+
219
+ <input id="fishPlus" value="+" type="button" class="fishAddList" onclick="fishClickPlus()">
220
+
221
+ <input id="fishMinus" value="-" type="button" class="fishRemoveList" collapse>
222
+
223
+ </td>
224
+
225
+ <td>
226
+
227
+ <INPUT id="fishName" value="A">
228
+
229
+ </td>
230
+
231
+ <td>
232
+
233
+ <select class="gon" style="border:1px gray solid" onchange="fishDemAbilLstChange(this)">
234
+
235
+ <option value=0">0</option>
236
+
237
+ </select>
238
+
239
+ </td>
240
+
241
+ <td>
242
+
243
+ <select id="1" style="border:1px gray solid;" onchange="fishDemMotLstChange(this)">
244
+
245
+ <option value="1">1</option>
246
+
247
+ </select>
248
+
249
+ </td>
250
+
251
+ <td>
252
+
253
+ <select id="fishStartTimeList" onchange="fishTimeListChange(this,1)">
254
+
255
+ <option value="00:00">00:00</option>
256
+
257
+ <option value="01:00">01:00</option>
258
+
259
+ <option value="02:00">02:00</option>
260
+
261
+ <option value="03:00">03:00</option>
262
+
263
+ </select>
264
+
265
+ </td>
266
+
267
+ <td>
268
+
269
+ <select id="fishEndTimeList" onchange="fishTimeListChange(this,2)">
270
+
271
+ <option value="00:00">00:00</option>
272
+
273
+ <option value="01:00">01:00</option>
274
+
275
+ <option value="02:00">02:00</option>
276
+
277
+ <option value="03:00">03:00</option>
278
+
279
+ <option value="23:00">23:00</option>
280
+
281
+ </select>
282
+
283
+ </td>
284
+
285
+ <td class="_colum_fishAreaTblSpace">&nbsp;</td>
286
+
287
+ <td></td>
288
+
289
+ <td class="_colum_fishAreaTblSpace">&nbsp;</td>
290
+
291
+ <td><INPUT type="text" id="roomCnt" value="0" disabled style="padding-right: 0.7vw;"></td>
292
+
293
+ </tr>
294
+
295
+ </tbody>
296
+
297
+ </table>
298
+
299
+ </div>
300
+
301
+ </div>
302
+
303
+ </div>
304
+
305
+ </div>
306
+
307
+ </div>
308
+
309
+ </div>
310
+
311
+ </body>
312
+
313
+ ```
314
+
315
+ animalArea.js
316
+
317
+ 本jsに5行表示するコードがあります。addEventListenerをコメントアウトすると、readyメソッドで初期表示の2行表示します。
30
318
 
31
319
  ```javascript
32
320
 
321
+ $(document).ready(function() {
322
+
323
+ $('#animalCntrlArea-tbody>tr')
324
+
325
+ .clone(true)
326
+
327
+ .insertAfter($('#animalCntrlArea-tbody>tr'));
328
+
329
+
330
+
331
+ $(document).on('change', '.changeList', function() {
332
+
333
+ $(this)
334
+
335
+ .parent()
336
+
337
+ .next()
338
+
339
+ .html($(this).val());
340
+
341
+ });
342
+
343
+ });
344
+
345
+
346
+
33
347
  window.addEventListener('DOMContentLoaded', function() {
34
348
 
349
+
350
+
351
+ let animalandlimit_col1=100;
352
+
353
+ let starttime_col1=02;
354
+
355
+ let endtime_col1=03;
356
+
357
+ let boilnaumunits_col1=300;
358
+
359
+
360
+
361
+ let animalandlimit_col2=200;
362
+
363
+ let starttime_col2=04;
364
+
365
+ let endtime_col2=05;
366
+
367
+ let boilnaumunits_col2=400;
368
+
369
+
370
+
35
- // テーブル行読込み(1行目をクロンして、2行目を作成る)
371
+ // 問題ドで
36
-
372
+
37
- let t=$('#animal_room-tbody>tr');
373
+ let t=$('#animalCntrlArea-tbody>tr');
38
374
 
39
375
  let tr0=t.eq(0).clone(true);
40
376
 
41
- t.append(tr0);
377
+ t.parent().append(tr0);
378
+
379
+
380
+
381
+ // 1col
382
+
383
+ $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(2).text(animalandlimit_col1);
384
+
385
+ $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(3).find("option[value='01']").attr('selected', true);
386
+
387
+ $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(5).find("option[value='02']").attr('selected', true);
388
+
389
+ $("#animalCntrlArea-tbody tr").eq(0).children('td').eq(6).text(boilnaumunits_col1);
390
+
391
+
392
+
393
+ // 2col
394
+
395
+ $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(2).text(animalandlimit_col2);
396
+
397
+ $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(3).find("option[value='03']").attr('selected', true);
398
+
399
+ $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(5).find("option[value='04']").attr('selected', true);
400
+
401
+ $("#animalCntrlArea-tbody tr").eq(1).children('td').eq(6).text(boilnaumunits_col2);
402
+
403
+
404
+
405
+
42
406
 
43
407
  }, false);
44
408
 
409
+
410
+
45
411
  ```
46
-
47
-
48
-
49
- ### 試したこと
50
-
51
-
52
-
53
- ```javascript
54
-
55
- //結果は同じでした。1行に2つのデータを横並び
56
-
57
- window.addEventListener('DOMContentLoaded', function() {
58
-
59
- // テーブル行の読込み
60
-
61
- let t=$('#animal_room-tbody>tr');
62
-
63
- let tr0=t.eq(0).clone(true);
64
-
65
- t.append(tr0).eq(1);
66
-
67
- t.append(tr0).eq(2);
68
-
69
- }, false);
70
-
71
-
72
-
73
- // テーブル行は表示しませんでした。見出しのみ表示しました。
74
-
75
- window.addEventListener('DOMContentLoaded', function() {
76
-
77
- // テーブル行の読込み(1行目をクローンして、2行目を作成する)
78
-
79
- let t=$('#animal_room-tbody>tr');
80
-
81
- let tr0=t.eq(0).clone(true);
82
-
83
- t.appendchild(tr0);
84
-
85
- }, false);
86
-
87
-
88
-
89
- ```
90
-
91
- ### 状況の追記
92
-
93
- ![イメージ説明](d4cc9070519945bca62329502849637d.png)
94
-
95
-
96
-
97
- ### 状況の追記2
98
-
99
- 他でcloneしている処理は下記のみになります。
100
-
101
- ```javascript
102
-
103
- $(document).ready(function() {
104
-
105
-
106
-
107
- // CSSで非表示にした1行目の行を複製し、その行の下に挿入
108
-
109
- // window.addEventListenerをコメントアウトした場合、下記で1行のみ表示します(親の行は非表示/子の行を1行のみ表示)
110
-
111
- $('#animal_room-tbody>tr')
112
-
113
- .clone(true)
114
-
115
- .insertAfter($('#animal_room-tbody>tr'));
116
-
117
- });
118
-
119
- ```
120
-
121
- 下記コードを実行しますと、全てtbody配下にtrを5行追加しました。
122
-
123
- ```javascript
124
-
125
- window.addEventListener('DOMContentLoaded', function() {
126
-
127
- // テーブル行の読込み
128
-
129
- let t=$('#animal_room-tbody>tr');
130
-
131
- // let tr0=t.eq(0).clone(true);
132
-
133
- // t.parent().append(tr0);
134
-
135
- t.eq(0).after(t.eq(0).clone(true)).append(tr0);
136
-
137
- }, false);
138
-
139
- ```
140
-
141
- ```javascript
142
-
143
- window.addEventListener('DOMContentLoaded', function() {
144
-
145
- // テーブル行の読込み
146
-
147
- let t=$('#animal_room-tbody>tr');
148
-
149
- // let tr0=t.eq(0).clone(true);
150
-
151
- // t.parent().append(tr0);
152
-
153
- t.eq(0).after(t.eq(0).clone(true)).after(tr0);
154
-
155
- }, false);
156
-
157
- ```
158
-
159
- ```javascript
160
-
161
- window.addEventListener('DOMContentLoaded', function() {
162
-
163
- // テーブル行の読込み
164
-
165
- let t=$('#animal_room-tbody>tr');
166
-
167
- // let tr0=t.eq(0).clone(true);
168
-
169
- // t.parent().append(tr0);
170
-
171
- t.eq(0).after(t.eq(0).clone(true));
172
-
173
- t.affter(tr0);
174
-
175
- }, false);
176
-
177
- ```
178
-
179
- ### 状況の追記3
180
-
181
- ```html
182
-
183
- <!DOCTYPE html>
184
-
185
- <head>
186
-
187
- <meta charset="utf-8"/>
188
-
189
- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
190
-
191
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
192
-
193
- <title>動物園管理</title>
194
-
195
- <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="animalManDisp.css"/>
196
-
197
- <script src="./js/jquery-3.6.0.min.js"></script>
198
-
199
- <script src="./js/animalAreabtn.js"></script>
200
-
201
- <script src="./js/animalManDispOnload.js"></script>
202
-
203
- </head>
204
-
205
- <body>
206
-
207
- <div class="row">
208
-
209
- <div class="panel">
210
-
211
- <div class="panel-body">
212
-
213
- <div class="panel-body-btm">
214
-
215
- <div class="form_animalCntrlArea">
216
-
217
- <!-- 動物園管理のテーブル 開始 -->
218
-
219
- <table id="animalCntrlArea-table">
220
-
221
- <thead>
222
-
223
- <tr>
224
-
225
- <th>1</th>
226
-
227
- <th>2</th>
228
-
229
- <th>3</th>
230
-
231
- <th>4</th>
232
-
233
- <th>5</th>
234
-
235
- <th>6</th>
236
-
237
- <th>7</th>
238
-
239
- </tr>
240
-
241
- </thead>
242
-
243
- <tbody id="animal_room-tbody" style="border-top:2px #C7C7C7 solid;">
244
-
245
- <tr>
246
-
247
- <td>
248
-
249
- <input id="animalAdd" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
250
-
251
- </td>
252
-
253
- <td>
254
-
255
- <input id="animalDel" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
256
-
257
- </td>
258
-
259
- <td width="100px">
260
-
261
- <input id="animalandunderlimit" class="animalNameText" name="animalandunderVal[]" type="text" placeholder="" disabled>
262
-
263
- </td>
264
-
265
- <td>
266
-
267
- <select id="startTimeList" class="animalCntrlTime">
268
-
269
- <option value="00">00</option>
270
-
271
- <option value="01">01</option>
272
-
273
- <option value="02">02</option>
274
-
275
- <option value="03">03</option>
276
-
277
- <option value="04">04</option>
278
-
279
- </select>
280
-
281
- </td>
282
-
283
- <td><span>~</span></td>
284
-
285
- <td align="left">
286
-
287
- <select id="endTimeList" class="animalCntrlTime">
288
-
289
- <option value="00">00</option>
290
-
291
- <option value="01">01</option>
292
-
293
- <option value="02">02</option>
294
-
295
- <option value="03">03</option>
296
-
297
- <option value="04">04</option>
298
-
299
- </select>
300
-
301
- </td>
302
-
303
- <td align="left" width="150px"><input id="animalUnits" class="animalNum" value="" disabled align="left" width="1px"></td>
304
-
305
- <td></td>
306
-
307
- </tr>
308
-
309
- </tbody>
310
-
311
- </table>
312
-
313
- <!-- form_animalCntrlArea終了 -->
314
-
315
- </div>
316
-
317
- <!-- panel-body-btm終了 -->
318
-
319
- </div>
320
-
321
- <!-- panel-body終了 -->
322
-
323
- </div>
324
-
325
- <!-- panel終了 -->
326
-
327
- </div>
328
-
329
- <!-- row終了 -->
330
-
331
- </div>
332
-
333
- </body>
334
-
335
- ```

5

誤記修正

2021/07/08 15:11

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -244,15 +244,15 @@
244
244
 
245
245
  <tr>
246
246
 
247
- <td width="50px">
247
+ <td>
248
-
248
+
249
- <input id="animalPlus" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
249
+ <input id="animalAdd" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
250
250
 
251
251
  </td>
252
252
 
253
- <td width="50px">
253
+ <td>
254
-
254
+
255
- <input id="animalMinus" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
255
+ <input id="animalDel" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
256
256
 
257
257
  </td>
258
258
 
@@ -262,7 +262,7 @@
262
262
 
263
263
  </td>
264
264
 
265
- <td width="150px">
265
+ <td>
266
266
 
267
267
  <select id="startTimeList" class="animalCntrlTime">
268
268
 
@@ -280,9 +280,9 @@
280
280
 
281
281
  </td>
282
282
 
283
- <td width="1px"><span>~</span></td>
283
+ <td><span>~</span></td>
284
-
284
+
285
- <td align="left" width="150px">
285
+ <td align="left">
286
286
 
287
287
  <select id="endTimeList" class="animalCntrlTime">
288
288
 
@@ -302,7 +302,7 @@
302
302
 
303
303
  <td align="left" width="150px"><input id="animalUnits" class="animalNum" value="" disabled align="left" width="1px"></td>
304
304
 
305
- <td width="400px"></td>
305
+ <td></td>
306
306
 
307
307
  </tr>
308
308
 

4

状況の追記3 htmlを追加

2021/07/08 10:08

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -175,3 +175,161 @@
175
175
  }, false);
176
176
 
177
177
  ```
178
+
179
+ ### 状況の追記3
180
+
181
+ ```html
182
+
183
+ <!DOCTYPE html>
184
+
185
+ <head>
186
+
187
+ <meta charset="utf-8"/>
188
+
189
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
190
+
191
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
192
+
193
+ <title>動物園管理</title>
194
+
195
+ <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="animalManDisp.css"/>
196
+
197
+ <script src="./js/jquery-3.6.0.min.js"></script>
198
+
199
+ <script src="./js/animalAreabtn.js"></script>
200
+
201
+ <script src="./js/animalManDispOnload.js"></script>
202
+
203
+ </head>
204
+
205
+ <body>
206
+
207
+ <div class="row">
208
+
209
+ <div class="panel">
210
+
211
+ <div class="panel-body">
212
+
213
+ <div class="panel-body-btm">
214
+
215
+ <div class="form_animalCntrlArea">
216
+
217
+ <!-- 動物園管理のテーブル 開始 -->
218
+
219
+ <table id="animalCntrlArea-table">
220
+
221
+ <thead>
222
+
223
+ <tr>
224
+
225
+ <th>1</th>
226
+
227
+ <th>2</th>
228
+
229
+ <th>3</th>
230
+
231
+ <th>4</th>
232
+
233
+ <th>5</th>
234
+
235
+ <th>6</th>
236
+
237
+ <th>7</th>
238
+
239
+ </tr>
240
+
241
+ </thead>
242
+
243
+ <tbody id="animal_room-tbody" style="border-top:2px #C7C7C7 solid;">
244
+
245
+ <tr>
246
+
247
+ <td width="50px">
248
+
249
+ <input id="animalPlus" value="+" type="button" class="animalAddList" onclick="animalClickPlus()">
250
+
251
+ </td>
252
+
253
+ <td width="50px">
254
+
255
+ <input id="animalMinus" value="-" type="button" class="animalRemoveList" onclick="animalClickMinus()">
256
+
257
+ </td>
258
+
259
+ <td width="100px">
260
+
261
+ <input id="animalandunderlimit" class="animalNameText" name="animalandunderVal[]" type="text" placeholder="" disabled>
262
+
263
+ </td>
264
+
265
+ <td width="150px">
266
+
267
+ <select id="startTimeList" class="animalCntrlTime">
268
+
269
+ <option value="00">00</option>
270
+
271
+ <option value="01">01</option>
272
+
273
+ <option value="02">02</option>
274
+
275
+ <option value="03">03</option>
276
+
277
+ <option value="04">04</option>
278
+
279
+ </select>
280
+
281
+ </td>
282
+
283
+ <td width="1px"><span>~</span></td>
284
+
285
+ <td align="left" width="150px">
286
+
287
+ <select id="endTimeList" class="animalCntrlTime">
288
+
289
+ <option value="00">00</option>
290
+
291
+ <option value="01">01</option>
292
+
293
+ <option value="02">02</option>
294
+
295
+ <option value="03">03</option>
296
+
297
+ <option value="04">04</option>
298
+
299
+ </select>
300
+
301
+ </td>
302
+
303
+ <td align="left" width="150px"><input id="animalUnits" class="animalNum" value="" disabled align="left" width="1px"></td>
304
+
305
+ <td width="400px"></td>
306
+
307
+ </tr>
308
+
309
+ </tbody>
310
+
311
+ </table>
312
+
313
+ <!-- form_animalCntrlArea終了 -->
314
+
315
+ </div>
316
+
317
+ <!-- panel-body-btm終了 -->
318
+
319
+ </div>
320
+
321
+ <!-- panel-body終了 -->
322
+
323
+ </div>
324
+
325
+ <!-- panel終了 -->
326
+
327
+ </div>
328
+
329
+ <!-- row終了 -->
330
+
331
+ </div>
332
+
333
+ </body>
334
+
335
+ ```

3

状況の追記2を追加

2021/07/08 10:06

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -91,3 +91,87 @@
91
91
  ### 状況の追記
92
92
 
93
93
  ![イメージ説明](d4cc9070519945bca62329502849637d.png)
94
+
95
+
96
+
97
+ ### 状況の追記2
98
+
99
+ 他でcloneしている処理は下記のみになります。
100
+
101
+ ```javascript
102
+
103
+ $(document).ready(function() {
104
+
105
+
106
+
107
+ // CSSで非表示にした1行目の行を複製し、その行の下に挿入
108
+
109
+ // window.addEventListenerをコメントアウトした場合、下記で1行のみ表示します(親の行は非表示/子の行を1行のみ表示)
110
+
111
+ $('#animal_room-tbody>tr')
112
+
113
+ .clone(true)
114
+
115
+ .insertAfter($('#animal_room-tbody>tr'));
116
+
117
+ });
118
+
119
+ ```
120
+
121
+ 下記コードを実行しますと、全てtbody配下にtrを5行追加しました。
122
+
123
+ ```javascript
124
+
125
+ window.addEventListener('DOMContentLoaded', function() {
126
+
127
+ // テーブル行の読込み
128
+
129
+ let t=$('#animal_room-tbody>tr');
130
+
131
+ // let tr0=t.eq(0).clone(true);
132
+
133
+ // t.parent().append(tr0);
134
+
135
+ t.eq(0).after(t.eq(0).clone(true)).append(tr0);
136
+
137
+ }, false);
138
+
139
+ ```
140
+
141
+ ```javascript
142
+
143
+ window.addEventListener('DOMContentLoaded', function() {
144
+
145
+ // テーブル行の読込み
146
+
147
+ let t=$('#animal_room-tbody>tr');
148
+
149
+ // let tr0=t.eq(0).clone(true);
150
+
151
+ // t.parent().append(tr0);
152
+
153
+ t.eq(0).after(t.eq(0).clone(true)).after(tr0);
154
+
155
+ }, false);
156
+
157
+ ```
158
+
159
+ ```javascript
160
+
161
+ window.addEventListener('DOMContentLoaded', function() {
162
+
163
+ // テーブル行の読込み
164
+
165
+ let t=$('#animal_room-tbody>tr');
166
+
167
+ // let tr0=t.eq(0).clone(true);
168
+
169
+ // t.parent().append(tr0);
170
+
171
+ t.eq(0).after(t.eq(0).clone(true));
172
+
173
+ t.affter(tr0);
174
+
175
+ }, false);
176
+
177
+ ```

2

画像の差し替え

2021/07/08 09:09

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -90,4 +90,4 @@
90
90
 
91
91
  ### 状況の追記
92
92
 
93
- ![イメージ説明](713dcef16eeb2a4820ed152ac44e10b9.png)
93
+ ![イメージ説明](d4cc9070519945bca62329502849637d.png)

1

状況の追記

2021/07/08 08:25

投稿

garou
garou

スコア9

test CHANGED
File without changes
test CHANGED
@@ -87,3 +87,7 @@
87
87
 
88
88
 
89
89
  ```
90
+
91
+ ### 状況の追記
92
+
93
+ ![イメージ説明](713dcef16eeb2a4820ed152ac44e10b9.png)