teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/07/16 14:05

投稿

退会済みユーザー
answer CHANGED
@@ -74,4 +74,7 @@
74
74
  </script>
75
75
  </body>
76
76
  </html>
77
- ```
77
+ ```
78
+
79
+ 参考サンプル
80
+ [見積もり作成フォームのテンプレート](https://qiita.com/ShibuyaKosuke/items/02ba7d084230747b7542)

1

追記

2018/07/16 14:05

投稿

退会済みユーザー
answer CHANGED
@@ -35,4 +35,43 @@
35
35
 
36
36
  0. 行削除ボタンにIDつけておくと重複するので削除。classにする。
37
37
  0. name属性の数字は空にしておけば数字を制御する必要がない。暗黙的にインデックスが割り当てられる。
38
- 0. clone() する前に input に値が入力されているとき、valueも一緒にコピーされるので、空にする。
38
+ 0. clone() する前に input に値が入力されているとき、valueも一緒にコピーされるので、空にする。
39
+
40
+ ---
41
+
42
+ ```html
43
+ <!DOCTYPE HTML>
44
+ <html lang="ja">
45
+ <head>
46
+ <meta charset="UTF-8">
47
+ <title></title>
48
+ </head>
49
+ <body>
50
+ <div class="foo">
51
+ <div class="form-inline row mt10 bar" >
52
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
53
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
54
+ <button class="btn btn-default mt20 del_row" type="button">行削除</button>
55
+ </div>
56
+ </div>
57
+ <div class="row">
58
+ <div class="col-md-3 mt15">
59
+ <button class="btn btn-default" id="add_row" type="button">行追加</button>
60
+ </div>
61
+ </div>
62
+ <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
63
+ <script type="text/javascript">
64
+ $(function () {
65
+ $("#add_row").on('click', function () {
66
+ var clone = $(".foo > .bar:first").clone();
67
+ var count = $(".foo > .bar").length;
68
+ clone.find('input').val('');
69
+ clone.find('input:eq(0)').prop("name", 'timetable[rows][' + count + '][detail1]');
70
+ clone.find('input:eq(1)').prop("name", 'timetable[rows][' + count + '][detail2]');
71
+ $(".foo").append(clone);
72
+ });
73
+ });
74
+ </script>
75
+ </body>
76
+ </html>
77
+ ```