質問編集履歴

3

情報追加

2021/12/20 02:53

投稿

aRyo
aRyo

スコア23

test CHANGED
File without changes
test CHANGED
@@ -894,11 +894,9 @@
894
894
 
895
895
  ```
896
896
 
897
-
897
+ ![イメージ説明](a53428aa69775cc5647fb744bdd4d0ec.png)
898
+
898
-
899
+ ここの生成された表の選択肢を設定する方法が分からないです
899
-
900
-
901
-
902
900
 
903
901
 
904
902
 

2

情報追加

2021/12/20 02:53

投稿

aRyo
aRyo

スコア23

test CHANGED
File without changes
test CHANGED
@@ -74,6 +74,840 @@
74
74
 
75
75
 
76
76
 
77
+
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+ 以上のコードを踏まえ、このような物を作りたいです。(※まだ途中です!)
86
+
87
+ 圃場と農薬カテゴリを選択すると自動的に入力画面が生成される感じですね。
88
+
89
+ ```JavaScript,html
90
+
91
+ <!DOCTYPE html>
92
+
93
+ <html lang="ja">
94
+
95
+ <head>
96
+
97
+ <meta charset="UTF-8">
98
+
99
+ <title>サンプル</title>
100
+
101
+ </head>
102
+
103
+ <body>
104
+
105
+
106
+
107
+ <p>農薬管理フォームです。</p>
108
+
109
+
110
+
111
+ <label for="day">日付を選択してください</label>
112
+
113
+ <p><span id="span1"></span></p>
114
+
115
+ <form name="form1">
116
+
117
+ <p></p>
118
+
119
+ <input name="date" type="date" />
120
+
121
+ <p></p>
122
+
123
+ </form>
124
+
125
+
126
+
127
+
128
+
129
+ <label for="name">記帳者を選択してください</label>
130
+
131
+ <p><span id="span2"></span></p>
132
+
133
+ <form name="form2">
134
+
135
+ <select id="name">
136
+
137
+ <option value="あああ">あああ</option>
138
+
139
+ <option value="いいい">いいい</option>
140
+
141
+ </select>
142
+
143
+ </form>
144
+
145
+ <p></p>
146
+
147
+
148
+
149
+
150
+
151
+ <p></p>
152
+
153
+ <label for="kategori">農薬を選択してください</label>
154
+
155
+ <p><span id="span3"></span></p>
156
+
157
+ <form name="form3">
158
+
159
+ <p></p>
160
+
161
+ <table border="1">
162
+
163
+
164
+
165
+
166
+
167
+ <tr>
168
+
169
+ <td></td>
170
+
171
+ <th>あ</th>
172
+
173
+ <th>い</th>
174
+
175
+ <th>う</th>
176
+
177
+ <th>え</th>
178
+
179
+ <tr>
180
+
181
+
182
+
183
+ <tr>
184
+
185
+ <td>殺菌剤</td>
186
+
187
+ <th>
188
+
189
+ <select id="sakkin_m">
190
+
191
+ <option value="0">0</option>
192
+
193
+ <option value="1">1</option>
194
+
195
+ <option value="2">2</option>
196
+
197
+ <option value="3">3</option>
198
+
199
+ <option value="4">4</option>
200
+
201
+ <option value="5">5</option>
202
+
203
+ <option value="6">6</option>
204
+
205
+ </select>
206
+
207
+ </th>
208
+
209
+ <th>
210
+
211
+ <select id="sakkin_k">
212
+
213
+ <option value="0">0</option>
214
+
215
+ <option value="1">1</option>
216
+
217
+ <option value="2">2</option>
218
+
219
+ <option value="3">3</option>
220
+
221
+ <option value="4">4</option>
222
+
223
+ <option value="5">5</option>
224
+
225
+ <option value="6">6</option>
226
+
227
+ </select>
228
+
229
+ </th>
230
+
231
+ <th>
232
+
233
+ <select id="sakkin_i">
234
+
235
+ <option value="0">0</option>
236
+
237
+ <option value="1">1</option>
238
+
239
+ <option value="2">2</option>
240
+
241
+ <option value="3">3</option>
242
+
243
+ <option value="4">4</option>
244
+
245
+ <option value="5">5</option>
246
+
247
+ <option value="6">6</option>
248
+
249
+ </select>
250
+
251
+ </th>
252
+
253
+ <th>
254
+
255
+ <select id="sakkin_s">
256
+
257
+ <option value="0">0</option>
258
+
259
+ <option value="1">1</option>
260
+
261
+ <option value="2">2</option>
262
+
263
+ <option value="3">3</option>
264
+
265
+ <option value="4">4</option>
266
+
267
+ <option value="5">5</option>
268
+
269
+ <option value="6">6</option>
270
+
271
+ </select>
272
+
273
+ </th>
274
+
275
+ </tr>
276
+
277
+
278
+
279
+
280
+
281
+ <tr>
282
+
283
+ <td>殺虫剤</td>
284
+
285
+ <th>
286
+
287
+ <select id="saccyu_m">
288
+
289
+ <option value="0">0</option>
290
+
291
+ <option value="1">1</option>
292
+
293
+ <option value="2">2</option>
294
+
295
+ <option value="3">3</option>
296
+
297
+ <option value="4">4</option>
298
+
299
+ <option value="5">5</option>
300
+
301
+ <option value="6">6</option>
302
+
303
+ </select>
304
+
305
+ </th>
306
+
307
+ <th>
308
+
309
+ <select id="saccyu_k">
310
+
311
+ <option value="0">0</option>
312
+
313
+ <option value="1">1</option>
314
+
315
+ <option value="2">2</option>
316
+
317
+ <option value="3">3</option>
318
+
319
+ <option value="4">4</option>
320
+
321
+ <option value="5">5</option>
322
+
323
+ <option value="6">6</option>
324
+
325
+ </select>
326
+
327
+ </th>
328
+
329
+ <th>
330
+
331
+ <select id="saccyu_i">
332
+
333
+ <option value="0">0</option>
334
+
335
+ <option value="1">1</option>
336
+
337
+ <option value="2">2</option>
338
+
339
+ <option value="3">3</option>
340
+
341
+ <option value="4">4</option>
342
+
343
+ <option value="5">5</option>
344
+
345
+ <option value="6">6</option>
346
+
347
+ </select>
348
+
349
+ </th>
350
+
351
+ <th>
352
+
353
+ <select id="saccyu_s">
354
+
355
+ <option value="0">0</option>
356
+
357
+ <option value="1">1</option>
358
+
359
+ <option value="2">2</option>
360
+
361
+ <option value="3">3</option>
362
+
363
+ <option value="4">4</option>
364
+
365
+ <option value="5">5</option>
366
+
367
+ <option value="6">6</option>
368
+
369
+ </select>
370
+
371
+ </th>
372
+
373
+ </tr>
374
+
375
+
376
+
377
+
378
+
379
+ <tr>
380
+
381
+ <td>展着剤</td>
382
+
383
+ <th>
384
+
385
+ <select id="tenchaku_m">
386
+
387
+ <option value="0">0</option>
388
+
389
+ <option value="1">1</option>
390
+
391
+ <option value="2">2</option>
392
+
393
+ <option value="3">3</option>
394
+
395
+ <option value="4">4</option>
396
+
397
+ <option value="5">5</option>
398
+
399
+ <option value="6">6</option>
400
+
401
+ </select>
402
+
403
+ </th>
404
+
405
+ <th>
406
+
407
+ <select id="tenchaku_k">
408
+
409
+ <option value="0">0</option>
410
+
411
+ <option value="1">1</option>
412
+
413
+ <option value="2">2</option>
414
+
415
+ <option value="3">3</option>
416
+
417
+ <option value="4">4</option>
418
+
419
+ <option value="5">5</option>
420
+
421
+ <option value="6">6</option>
422
+
423
+ </select>
424
+
425
+ </th>
426
+
427
+ <th>
428
+
429
+ <select id="tenchaku_i">
430
+
431
+ <option value="0">0</option>
432
+
433
+ <option value="1">1</option>
434
+
435
+ <option value="2">2</option>
436
+
437
+ <option value="3">3</option>
438
+
439
+ <option value="4">4</option>
440
+
441
+ <option value="5">5</option>
442
+
443
+ <option value="6">6</option>
444
+
445
+ </select>
446
+
447
+ </th>
448
+
449
+ <th>
450
+
451
+ <select id="tenchaku_s">
452
+
453
+ <option value="0">0</option>
454
+
455
+ <option value="1">1</option>
456
+
457
+ <option value="2">2</option>
458
+
459
+ <option value="3">3</option>
460
+
461
+ <option value="4">4</option>
462
+
463
+ <option value="5">5</option>
464
+
465
+ <option value="6">6</option>
466
+
467
+ </select>
468
+
469
+ </th>
470
+
471
+ </tr>
472
+
473
+
474
+
475
+
476
+
477
+ <tr>
478
+
479
+ <td>天敵</td>
480
+
481
+ <th>
482
+
483
+ <select id="tenteki_m">
484
+
485
+ <option value="0">0</option>
486
+
487
+ <option value="1">1</option>
488
+
489
+ <option value="2">2</option>
490
+
491
+ <option value="3">3</option>
492
+
493
+ <option value="4">4</option>
494
+
495
+ <option value="5">5</option>
496
+
497
+ <option value="6">6</option>
498
+
499
+ </select>
500
+
501
+ </th>
502
+
503
+ <th>
504
+
505
+ <select id="tenteki_k">
506
+
507
+ <option value="0">0</option>
508
+
509
+ <option value="1">1</option>
510
+
511
+ <option value="2">2</option>
512
+
513
+ <option value="3">3</option>
514
+
515
+ <option value="4">4</option>
516
+
517
+ <option value="5">5</option>
518
+
519
+ <option value="6">6</option>
520
+
521
+ </select>
522
+
523
+ </th>
524
+
525
+ <th>
526
+
527
+ <select id="tenteki_i">
528
+
529
+ <option value="0">0</option>
530
+
531
+ <option value="1">1</option>
532
+
533
+ <option value="2">2</option>
534
+
535
+ <option value="3">3</option>
536
+
537
+ <option value="4">4</option>
538
+
539
+ <option value="5">5</option>
540
+
541
+ <option value="6">6</option>
542
+
543
+ </select>
544
+
545
+ </th>
546
+
547
+ <th>
548
+
549
+ <select id="tenteki_s">
550
+
551
+ <option value="0">0</option>
552
+
553
+ <option value="1">1</option>
554
+
555
+ <option value="2">2</option>
556
+
557
+ <option value="3">3</option>
558
+
559
+ <option value="4">4</option>
560
+
561
+ <option value="5">5</option>
562
+
563
+ <option value="6">6</option>
564
+
565
+ </select>
566
+
567
+ </th>
568
+
569
+ </tr>
570
+
571
+
572
+
573
+
574
+
575
+ <tr>
576
+
577
+ <td>その他</td>
578
+
579
+ <th>
580
+
581
+ <select id="sonota_m">
582
+
583
+ <option value="0">0</option>
584
+
585
+ <option value="1">1</option>
586
+
587
+ <option value="2">2</option>
588
+
589
+ <option value="3">3</option>
590
+
591
+ <option value="4">4</option>
592
+
593
+ <option value="5">5</option>
594
+
595
+ <option value="6">6</option>
596
+
597
+ </select>
598
+
599
+ </th>
600
+
601
+ <th>
602
+
603
+ <select id="sonota_k">
604
+
605
+ <option value="0">0</option>
606
+
607
+ <option value="1">1</option>
608
+
609
+ <option value="2">2</option>
610
+
611
+ <option value="3">3</option>
612
+
613
+ <option value="4">4</option>
614
+
615
+ <option value="5">5</option>
616
+
617
+ <option value="6">6</option>
618
+
619
+ </select>
620
+
621
+ </th>
622
+
623
+ <th>
624
+
625
+ <select id="sonota_i">
626
+
627
+ <option value="0">0</option>
628
+
629
+ <option value="1">1</option>
630
+
631
+ <option value="2">2</option>
632
+
633
+ <option value="3">3</option>
634
+
635
+ <option value="4">4</option>
636
+
637
+ <option value="5">5</option>
638
+
639
+ <option value="6">6</option>
640
+
641
+ </select>
642
+
643
+ </th>
644
+
645
+ <th>
646
+
647
+ <select id="sonota_s">
648
+
649
+ <option value="0">0</option>
650
+
651
+ <option value="1">1</option>
652
+
653
+ <option value="2">2</option>
654
+
655
+ <option value="3">3</option>
656
+
657
+ <option value="4">4</option>
658
+
659
+ <option value="5">5</option>
660
+
661
+ <option value="6">6</option>
662
+
663
+ </select>
664
+
665
+ </th>
666
+
667
+ </tr>
668
+
669
+
670
+
671
+ </table>
672
+
673
+ </form>
674
+
675
+ <p></p>
676
+
677
+
678
+
679
+ <p>
680
+
681
+ <table border="1" id="targetTable">
682
+
683
+ <thead>
684
+
685
+ <tr>
686
+
687
+ <td>圃場名</td>
688
+
689
+ <td>カテゴリ</td>
690
+
691
+ <td>農薬名</td>
692
+
693
+ <td>総量</td>
694
+
695
+ <td>単位</td>
696
+
697
+ </tr>
698
+
699
+ </thead>
700
+
701
+ <tbody>
702
+
703
+ <tr>
704
+
705
+ <td>(例)</td>
706
+
707
+ <td>殺菌剤</td>
708
+
709
+ <td>アフェット</td>
710
+
711
+ <td>600</td>
712
+
713
+ <td>g</td>
714
+
715
+ </tr>
716
+
717
+ <tbody>
718
+
719
+ </table>
720
+
721
+ </p>
722
+
723
+
724
+
725
+
726
+
727
+ <div>
728
+
729
+ <input type="button" value="ボタン1" onclick="clickBtn1()"/>
730
+
731
+ </div>
732
+
733
+
734
+
735
+ <script>
736
+
737
+ function clickBtn1(){
738
+
739
+ ///////////////////////////////////////////////////////////////////////////////
740
+
741
+ //日付の抽出
742
+
743
+ //const day = document.form1.date;
744
+
745
+
746
+
747
+ // 値(数値)を取得
748
+
749
+ //const num = day.selectedIndex;
750
+
751
+
752
+
753
+ // 値(数値)から値(value値)を取得
754
+
755
+ //const str = day.options[num].value;
756
+
757
+
758
+
759
+ //document.getElementById("span1").textContent = str;
760
+
761
+
762
+
763
+ ///////////////////////////////////////////////////////////////////////////////
764
+
765
+ //記帳者の抽出
766
+
767
+ const name = document.form2.name;
768
+
769
+
770
+
771
+ // 値(数値)を取得
772
+
773
+ const num2 = name.selectedIndex;
774
+
775
+
776
+
777
+ // 値(数値)から値(value値)を取得
778
+
779
+ const str2 = name.options[num2].value;
780
+
781
+ document.getElementById("span2").textContent = str2;
782
+
783
+
784
+
785
+
786
+
787
+
788
+
789
+ ///////////////////////////////////////////////////////////////////////////////
790
+
791
+ //カテゴリと圃場の抽出
792
+
793
+ const sakkin_maruyama = document.form3.sakkin_m;
794
+
795
+ // 値(数値)を取得
796
+
797
+ const num3 = sakkin_maruyama.selectedIndex;
798
+
799
+ // 値(数値)から値(value値)を取得
800
+
801
+ const str3 = sakkin_m.options[num3].value;
802
+
803
+
804
+
805
+
806
+
807
+
808
+
809
+ const sakkin_kamo = document.form3.sakkin_k;
810
+
811
+ // 値(数値)を取得
812
+
813
+ const num4 = sakkin_kamo.selectedIndex;
814
+
815
+ // 値(数値)から値(value値)を取得
816
+
817
+ const str4 = sakkin_k.options[num4].value;
818
+
819
+
820
+
821
+
822
+
823
+ const saccyu_maruyama = document.form3.saccyu_m;
824
+
825
+ // 値(数値)を取得
826
+
827
+ const num5 = saccyu_m.selectedIndex;
828
+
829
+ // 値(数値)から値(value値)を取得
830
+
831
+ const str5 = saccyu_m.options[num5].value;
832
+
833
+
834
+
835
+ ///////////////////////////////////////////////////////////////////////////////
836
+
837
+ //テーブル編集
838
+
839
+ //圃場とカテゴリの選択した数だけ表を追加するスクリプト
840
+
841
+
842
+
843
+ for(i = 0; i < Number(str3); i++){
844
+
845
+ let table = document.getElementById('targetTable');
846
+
847
+ let newRow = table.insertRow();
848
+
849
+
850
+
851
+ let newCell = newRow.insertCell();
852
+
853
+ let newText = document.createTextNode('あ');
854
+
855
+ newCell.appendChild(newText);
856
+
857
+
858
+
859
+ newCell = newRow.insertCell();
860
+
861
+ newText = document.createTextNode(殺菌剤);
862
+
863
+ newCell.appendChild(newText);
864
+
865
+
866
+
867
+ newCell = newRow.insertCell();
868
+
869
+ newCell.innerHTML = `<select>`;//ここでの選択支の指定方法でつまっています!!!
870
+
871
+
872
+
873
+ newCell = newRow.insertCell();
874
+
875
+ newCell.innerHTML = `<input>`;
876
+
877
+
878
+
879
+ }
880
+
881
+
882
+
883
+
884
+
885
+ }
886
+
887
+ </script>
888
+
889
+
890
+
891
+ </body>
892
+
893
+ </html>
894
+
895
+ ```
896
+
897
+
898
+
899
+
900
+
901
+
902
+
903
+
904
+
905
+
906
+
907
+
908
+
909
+
910
+
77
911
  調べたのですが、良く分からず詰まってしまいました。
78
912
 
79
913
  ご助言の程、よろしくお願いいたします。

1

情報追加

2021/12/20 02:34

投稿

aRyo
aRyo

スコア23

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  やりたい事
2
2
 
3
- JavaScriptでtableにプルダウンと入力画面を追加する方法
3
+ JavaScriptでtableにプルダウンと入力画面を追加したい。
4
4
 
5
5
 
6
6
 
@@ -9,6 +9,8 @@
9
9
  https://techacademy.jp/magazine/28581
10
10
 
11
11
 
12
+
13
+ JavaScriptで行を追加し、追加した行の中でプルダウンや入力をできるようにしたいです。
12
14
 
13
15
 
14
16