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

回答編集履歴

1

JavaScriptコードの追記

2017/12/18 05:54

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,3 +1,5 @@
1
+ ### 多次元配列
2
+
1
3
  > これが非常に厄介で例えばname="hoge[0][huga][1][]のようなフォームが沢山あります。
2
4
 
3
5
  逆に質問させて頂きたいのですが、なぜそんなに複雑な名前が必要なのでしょうか。
@@ -37,4 +39,99 @@
37
39
 
38
40
  index値が多少増える程度で名前はそこまで長くはならないように思います。
39
41
 
42
+ ### JavaScriptコード
43
+
44
+ > javascript側でのフォーム追加処理はこんな感じです。※jquery使ってます
45
+
46
+ HTMLが見えないのでどういう理屈でそのコードに至ったのかまで読み取れませんでしたが、私なら次のように書きます。
47
+
48
+ - [入力項目の多い画面の設計 - JSFiddle](https://jsfiddle.net/3u96y28n/)
49
+
50
+ ```HTML
51
+ <form>
52
+ <input class="insert-fieldset" type="button" value="追加">
53
+ <fieldset>
54
+ <legend>フォーム群1</legend>
55
+ <p><input type="text" name="table[0][text][0]"></p>
56
+ <p><input type="text" name="table[0][text][1]"></p>
57
+
58
+ <input class="insert-fieldset" type="button" value="追加">
59
+
60
+ <fieldset>
61
+ <legend>フォーム群1-1</legend>
62
+ <p><input type="text" name="table[0][group][0][0]"></p>
63
+ <p><input type="text" name="table[0][group][0][1]"></p>
64
+ </fieldset>
65
+
66
+ <fieldset>
67
+ <legend>フォーム群1-2</legend>
68
+ <p><input type="text" name="table[0][group][1][0]"></p>
69
+ <p><input type="text" name="table[0][group][1][1]"></p>
70
+ </fieldset>
71
+ </fieldset>
72
+
73
+ <fieldset>
74
+ <legend>フォーム群2</legend>
75
+ <p><input type="text" name="table[1][text][0]"></p>
76
+ <p><input type="text" name="table[1][text][1]"></p>
77
+
78
+ <input class="insert-fieldset" type="button" value="追加">
79
+
80
+ <fieldset>
81
+ <legend>フォーム群2-1</legend>
82
+ <p><input type="text" name="table[1][group][0][0]"></p>
83
+ <p><input type="text" name="table[1][group][0][1]"></p>
84
+ </fieldset>
85
+
86
+ <fieldset>
87
+ <legend>フォーム群2-2</legend>
88
+ <p><input type="text" name="table[1][group][1][0]"></p>
89
+ <p><input type="text" name="table[1][group][1][1]"></p>
90
+ </fieldset>
91
+ </fieldset>
92
+ </form>
93
+
94
+ <script>
95
+ 'use strict';
96
+ jQuery('form').on('click', '.insert-fieldset', function handleClick (event) {
97
+ var input = jQuery(event.target),
98
+ nestLevel = input.parents('fieldset').length + 1,
99
+ lastFieldset = input.nextAll('fieldset:last()'),
100
+ fieldset = lastFieldset.clone(true),
101
+ legend = fieldset.find('legend'),
102
+ textNode = legend[0].firstChild,
103
+ beforeTopLevelCaption = textNode.data,
104
+ match = /^(\D*(?:\d+\D*)*)(\d+)$/.exec(beforeTopLevelCaption),
105
+ afterTopLevelCaption = match[1] + ++match[2];
106
+
107
+ textNode.data = afterTopLevelCaption;
108
+
109
+ for (var i = 1, len = legend.length, text, index; i < len; ++i) {
110
+ textNode = legend[i].firstChild;
111
+ text = textNode.data;
112
+ index = text.indexOf(beforeTopLevelCaption);
113
+
114
+ if (index !== -1) {
115
+ textNode.data = text.slice(0, index) + afterTopLevelCaption + text.slice(index + afterTopLevelCaption.length);
116
+ }
117
+ }
118
+
119
+ for (var i = 0, inputList = fieldset.find('input[type="text"]'), len = inputList.length, input, name, reg = /[\d+(?=])/g, result, j, index, bracket; i < len; ++i) {
120
+ input = inputList[i];
121
+ name = input.name;
122
+ j = 0;
123
+ reg.lastIndex = 0;
124
+
125
+ while (result = reg.exec(name), ++j < nestLevel);
126
+
127
+ index = result.index;
128
+ bracket = result[0];
129
+ input.name = name.slice(0, index) + '[' + (+bracket.slice(1) + 1) + ']' + name.slice(index + bracket.length + 1);
130
+ }
131
+
132
+ lastFieldset.after(fieldset);
133
+ });
134
+ </script>
135
+ ```
136
+
40
137
  Re: annderberさん