質問編集履歴

1

追記

2017/08/10 03:16

投稿

tkck
tkck

スコア32

test CHANGED
File without changes
test CHANGED
@@ -43,3 +43,695 @@
43
43
  親子関係があり、動的に増減するフォームはどのように作成するとよろしいでしょうか。
44
44
 
45
45
  分かりづらくすみませんが何卒よろしくお願いいたします。
46
+
47
+
48
+
49
+ jquery
50
+
51
+ ```
52
+
53
+ function make_ko(ko_num){
54
+
55
+ var len = $(".p_email").length;
56
+
57
+ var len_plus = len+1;
58
+
59
+ var element = $(".ko_"+ko_num).children(".ko_form");
60
+
61
+ var element_val = $(element).length;
62
+
63
+ var element_val_2 = element_val+1;
64
+
65
+ var ko_len = $(".oya_ko_css").length;
66
+
67
+ //div作ってクラス指定する
68
+
69
+ var sample_div = $("<div/>");
70
+
71
+ sample_div.addClass("ko_txt_" +len_plus);
72
+
73
+ sample_div.addClass("ko_form");
74
+
75
+
76
+
77
+ var title = $("<p/>");
78
+
79
+ title.text("【"+len_plus+"】 内容の登録");
80
+
81
+
82
+
83
+ var spn_0 = $("<span/>");
84
+
85
+ spn_0.text("内容");
86
+
87
+
88
+
89
+ //divの中の子要素を作る
90
+
91
+ var inp_0 = $("<input/>");
92
+
93
+ inp_0.attr({
94
+
95
+ "type":"text",
96
+
97
+ "num":ko_len,
98
+
99
+ "name":"param_"+(ko_num-1)+"_"+element_val+"_des_contents"
100
+
101
+ });
102
+
103
+ inp_0.addClass("form-control");
104
+
105
+ inp_0.val("");
106
+
107
+
108
+
109
+ var spn_1 = $("<span/>");
110
+
111
+ spn_1.text("単位");
112
+
113
+ var inp_1 = $("<input/>");
114
+
115
+ inp_1.attr({
116
+
117
+ "type":"text",
118
+
119
+ "num":ko_len,
120
+
121
+ "name":"param_"+(ko_num-1)+"_"+element_val+"_des_unit",
122
+
123
+ "list": "quontity"
124
+
125
+ });
126
+
127
+ inp_1.addClass("form-control textBox");
128
+
129
+ inp_1.val("");
130
+
131
+
132
+
133
+ var spn_2 = $("<span/>");
134
+
135
+ spn_2.text("数量");
136
+
137
+ var inp_2 = $("<input/>");
138
+
139
+ inp_2.attr({
140
+
141
+ "type":"text",
142
+
143
+ "num":ko_len,
144
+
145
+ "name":"param_"+(ko_num-1)+"_"+element_val+"_des_quontity"
146
+
147
+ });
148
+
149
+ inp_2.addClass("form-control");
150
+
151
+ inp_2.val("");
152
+
153
+
154
+
155
+ var sp_02_5 = $("<span/>");
156
+
157
+ sp_02_5.attr({
158
+
159
+ "id":"des_er"+(ko_num-1)+"_"+element_val+"",
160
+
161
+ "style" : "color:red"
162
+
163
+ });
164
+
165
+
166
+
167
+ var spn_3 = $("<span/>");
168
+
169
+ spn_3.text("単価");
170
+
171
+
172
+
173
+ var spn_4 = $("<span/>");
174
+
175
+ spn_4.text("価格");
176
+
177
+ spn_4.attr({
178
+
179
+ "id":"money"+(ko_num-1)+"_"+element_val+""
180
+
181
+ });
182
+
183
+
184
+
185
+ var sp_error = $("<span/>")
186
+
187
+ sp_error.addClass("alert");
188
+
189
+ var inp_3 = $("<input/>");
190
+
191
+ inp_3.attr({
192
+
193
+ "type":"text",
194
+
195
+ "num":ko_len,
196
+
197
+ "name":"param_"+(ko_num-1)+"_"+element_val+"_des_unit_price"
198
+
199
+ });
200
+
201
+ inp_3.addClass("p_email form-control textBox");
202
+
203
+ inp_3.val("");
204
+
205
+
206
+
207
+ var del_btn = $("<input/>");
208
+
209
+ del_btn.attr({
210
+
211
+ "type":"button",
212
+
213
+ "num":len_plus,
214
+
215
+ });
216
+
217
+ del_btn.addClass("delete");
218
+
219
+ del_btn.val("削除");
220
+
221
+
222
+
223
+ var newline = $("<br />");
224
+
225
+ var newline_2 = $("<br />");
226
+
227
+ var newline_3 = $("<br />");
228
+
229
+ var newline_4 = $("<br />");
230
+
231
+
232
+
233
+ sample_div.append(title);
234
+
235
+ sample_div.append(spn_0);
236
+
237
+ sample_div.append(inp_0);
238
+
239
+ sample_div.append(newline);
240
+
241
+ sample_div.append(spn_1);
242
+
243
+ sample_div.append(inp_1);
244
+
245
+ sample_div.append(newline_2);
246
+
247
+
248
+
249
+ sample_div.append(spn_2);
250
+
251
+ sample_div.append(inp_2);
252
+
253
+ sample_div.append(sp_02_5);
254
+
255
+ sample_div.append(newline_3);
256
+
257
+ sample_div.append(spn_3);
258
+
259
+ sample_div.append(inp_3);
260
+
261
+ sample_div.append(newline_4);
262
+
263
+ sample_div.append(spn_4);
264
+
265
+
266
+
267
+ if(len_plus >= 2){
268
+
269
+ sample_div.append(del_btn);
270
+
271
+ }
272
+
273
+
274
+
275
+ $(".ko_"+ko_num).append(sample_div);
276
+
277
+
278
+
279
+ $(".delete").on("click",function(){
280
+
281
+ var del_num = $(this).attr("num");
282
+
283
+ $(".ko_txt_"+del_num).remove();
284
+
285
+ });
286
+
287
+ });
288
+
289
+ }
290
+
291
+
292
+
293
+ function make_oya(){
294
+
295
+ var len = $(".oya_ko_css").length;
296
+
297
+ var len_plus = len+1;
298
+
299
+ //先に元のdivをつくる、必要ならその中にさらにdivをつくる
300
+
301
+ var oyako = $("<div/>");
302
+
303
+ oyako.addClass("oyako_"+len_plus);
304
+
305
+ oyako.addClass("oya_ko_css");
306
+
307
+ var oya_1 = $("<div/>");
308
+
309
+ oya_1.addClass("oya_"+len_plus);
310
+
311
+ oya_1.addClass("oya_css");
312
+
313
+ var oya_title = $("<div/>");
314
+
315
+ oya_title.addClass("oya_title");
316
+
317
+
318
+
319
+ var ko_1 = $("<div/>");
320
+
321
+ ko_1.addClass("ko_"+len_plus);
322
+
323
+ ko_1.addClass("ko_css");
324
+
325
+ var ko_txt = $("<div/>");
326
+
327
+ ko_txt.addClass("ko_txt");
328
+
329
+ ko_txt.addClass("ko_form");
330
+
331
+
332
+
333
+ //親要素部品作り
334
+
335
+ var title = $("<p/>");
336
+
337
+ title.text("【"+len_plus+"】内容項目の登録");
338
+
339
+ var sp_0 = $("<span/>");
340
+
341
+ sp_0.text("内容項目");
342
+
343
+ var sp_0_1 = $("<span/>")
344
+
345
+ sp_0_1.addClass("alert");
346
+
347
+ var inp_0 = $("<input/>");
348
+
349
+ inp_0.attr({
350
+
351
+ "type":"text",
352
+
353
+ "num":len_plus,
354
+
355
+ "name":"param_"+len+"_quo_description_item"
356
+
357
+ });
358
+
359
+ inp_0.addClass("form-control");
360
+
361
+
362
+
363
+ var sp_01 = $("<span/>");
364
+
365
+ sp_01.text("単位");
366
+
367
+ var inp_01 = $("<input/>");
368
+
369
+ inp_01.attr({
370
+
371
+ "type":"text",
372
+
373
+ "num":len_plus,
374
+
375
+ "name":"param_"+len+"_quo_unit",
376
+
377
+ "list": "quontity"
378
+
379
+ });
380
+
381
+ inp_01.addClass("form-control");
382
+
383
+
384
+
385
+ var sp_02 = $("<span/>");
386
+
387
+ sp_02.text("数量");
388
+
389
+ var inp_02 = $("<input/>");
390
+
391
+ inp_02.attr({
392
+
393
+ "type":"text",
394
+
395
+ "num":len_plus,
396
+
397
+ "name":"param_"+len+"_quo_quontity"
398
+
399
+ });
400
+
401
+ inp_02.addClass("form-control");
402
+
403
+
404
+
405
+ var sp_03 = $("<span/>");
406
+
407
+ sp_03.text("単価");
408
+
409
+ var inp_03 = $("<input/>");
410
+
411
+ inp_03.attr({
412
+
413
+ "type":"text",
414
+
415
+ "num":len_plus,
416
+
417
+ "name":"param_"+len+"_quo_unit_price"
418
+
419
+ });
420
+
421
+ inp_03.addClass("form-control textBox");
422
+
423
+
424
+
425
+ var sp_03_5 = $("<span/>");
426
+
427
+ sp_03_5.attr({
428
+
429
+ "id":"quo_er"+len+"",
430
+
431
+ "style" : "color:red"
432
+
433
+ });
434
+
435
+
436
+
437
+ var sp_04 = $("<span/>");
438
+
439
+ sp_04.text("価格");
440
+
441
+ sp_04.attr({
442
+
443
+ "id":"money"+len+""
444
+
445
+ });
446
+
447
+
448
+
449
+ var newline = $("<br />");
450
+
451
+ var newline_2 = $("<br />");
452
+
453
+ var newline_3 = $("<br />");
454
+
455
+ var newline_4 = $("<br />");
456
+
457
+ var newline_5 = $("<br />");
458
+
459
+ var newline_6 = $("<br />");
460
+
461
+ var newline_7 = $("<br />");
462
+
463
+ var newline_8 = $("<br />");
464
+
465
+ var newline_9 = $("<br />");
466
+
467
+
468
+
469
+ //子要素の部品作り
470
+
471
+ var ko_addbtn = $("<input/>");
472
+
473
+ ko_addbtn.attr({
474
+
475
+ "type":"button",
476
+
477
+ "num":len_plus,
478
+
479
+ "id":"ko_add_btn"
480
+
481
+ });
482
+
483
+ ko_addbtn.addClass("ko_btn_css btn btn-success");
484
+
485
+ ko_addbtn.val("内容を増やす");
486
+
487
+
488
+
489
+ var ko_title = $("<p/>");
490
+
491
+ ko_title.text("【"+1+"】 内容の登録");
492
+
493
+
494
+
495
+ var spn_4 = $("<span/>");
496
+
497
+ spn_4.text("内容");
498
+
499
+ var inp_4 = $("<input/>");
500
+
501
+ inp_4.attr({
502
+
503
+ "type":"text",
504
+
505
+ "num":len_plus,
506
+
507
+ "name":"param_"+len+"_0_des_contents"
508
+
509
+ });
510
+
511
+ inp_4.addClass("form-control");
512
+
513
+
514
+
515
+ var spn_5 = $("<span/>");
516
+
517
+ spn_5.text("単位");
518
+
519
+ var inp_5 = $("<input/>");
520
+
521
+ inp_5.attr({
522
+
523
+ "type":"text",
524
+
525
+ "num":len_plus,
526
+
527
+ "name":"param_"+len+"_0_des_unit",
528
+
529
+ "list": "quontity"
530
+
531
+ });
532
+
533
+ inp_5.addClass("form-control");
534
+
535
+
536
+
537
+ var spn_6 = $("<span/>");
538
+
539
+ spn_6.text("数量");
540
+
541
+ var inp_6 = $("<input/>");
542
+
543
+ inp_6.attr({
544
+
545
+ "type":"text",
546
+
547
+ "num":len_plus,
548
+
549
+ "name":"param_"+len+"_0_des_quontity"
550
+
551
+ });
552
+
553
+ inp_6.addClass("form-control");
554
+
555
+
556
+
557
+ var spn_6_5 = $("<span/>");
558
+
559
+ spn_6_5.attr({
560
+
561
+ "id" : "des_er"+len+"",
562
+
563
+ "style" : "color:red"
564
+
565
+ });
566
+
567
+
568
+
569
+ var spn_7 = $("<span/>");
570
+
571
+ spn_7.text("単価");
572
+
573
+ var sp_error = $("<span/>")
574
+
575
+ sp_error.addClass("alert");
576
+
577
+ var inp_7 = $("<input/>");
578
+
579
+ inp_7.attr({
580
+
581
+ "type":"text",
582
+
583
+ "num":len_plus,
584
+
585
+ "name":"param_"+len+"_0_des_unit_price"
586
+
587
+ });
588
+
589
+ inp_7.addClass("p_email form-control textBox");
590
+
591
+
592
+
593
+ var spn_8 = $("<span/>");
594
+
595
+ spn_8.text("価格");
596
+
597
+ spn_8.attr({
598
+
599
+ "id":"money_ko"+len+"_0"
600
+
601
+ });
602
+
603
+
604
+
605
+ //親要素のdivの中に子要素となるdivをappend appendしたdivの中に入れる要素をappend 最後に作った大枠のdivをhtmlにあるdivにappend
606
+
607
+ oyako.append(oya_1);
608
+
609
+ oyako.append(ko_1);
610
+
611
+ oya_1.append(oya_title);
612
+
613
+ oya_title.append(title);
614
+
615
+ oya_1.append(newline);
616
+
617
+ oya_1.append(sp_0);
618
+
619
+ oya_1.append(inp_0);
620
+
621
+ oya_1.append(newline_2);
622
+
623
+ oya_1.append(sp_01);
624
+
625
+ oya_1.append(inp_01);
626
+
627
+ oya_1.append(newline_3);
628
+
629
+ oya_1.append(sp_02);
630
+
631
+ oya_1.append(inp_02);
632
+
633
+ oya_1.append(sp_03_5);
634
+
635
+ oya_1.append(newline_4);
636
+
637
+ oya_1.append(sp_03);
638
+
639
+ oya_1.append(inp_03);
640
+
641
+ oya_1.append(newline);
642
+
643
+ oya_1.append(sp_04);
644
+
645
+ oya_1.append(newline_8);
646
+
647
+
648
+
649
+ ko_1.append(ko_addbtn);
650
+
651
+ ko_1.append(ko_txt);
652
+
653
+ ko_txt.append(ko_title);
654
+
655
+ ko_txt.append(spn_4);
656
+
657
+ ko_txt.append(inp_4);
658
+
659
+ ko_txt.append(newline_5);
660
+
661
+ ko_txt.append(spn_5);
662
+
663
+ ko_txt.append(inp_5);
664
+
665
+ ko_txt.append(newline_6);
666
+
667
+ ko_txt.append(spn_6);
668
+
669
+ ko_txt.append(inp_6);
670
+
671
+ ko_txt.append(spn_6_5);
672
+
673
+ ko_txt.append(newline_7);
674
+
675
+ ko_txt.append(spn_7);
676
+
677
+ ko_txt.append(inp_7);
678
+
679
+ ko_txt.append(newline_9);
680
+
681
+ ko_txt.append(spn_8);
682
+
683
+
684
+
685
+ $("#family").append(oyako);
686
+
687
+ }
688
+
689
+
690
+
691
+
692
+
693
+ //jquery
694
+
695
+ $(function(){
696
+
697
+ make_oya();
698
+
699
+
700
+
701
+ $('#family').on('click','#ko_add_btn',function(){
702
+
703
+ var ko_num = $(this).attr("num");
704
+
705
+ make_ko(ko_num);
706
+
707
+ });
708
+
709
+
710
+
711
+ $("#oya_add_btn").click(function(){
712
+
713
+ make_oya();
714
+
715
+ });
716
+
717
+ });
718
+
719
+ ```
720
+
721
+
722
+
723
+ JAVA
724
+
725
+ ```
726
+
727
+ String param_0_quo_description_item = request.getParameter("param_0_quo_description_item");
728
+
729
+ String param_0_quo_unit = request.getParameter("param_0_quo_unit");
730
+
731
+ String param_0_quo_quontity = request.getParameter(" param_0_quo_quontity");
732
+
733
+ String param_0_quo_unit_price = request.getParameter("param_0_quo_unit_price");
734
+
735
+
736
+
737
+ ```