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

回答編集履歴

2

ちょうせい

2019/11/13 05:35

投稿

yambejp
yambejp

スコア117837

answer CHANGED
@@ -18,7 +18,6 @@
18
18
  var name=$(this).attr('name').replace(/_([0-9]+)$/g,'_'+cnt);
19
19
  $(this).attr('name',name);
20
20
  });
21
- console.log(dom.html())
22
21
  dom.appendTo($('#hogehuga'));
23
22
  });
24
23
  });

1

sample

2019/11/13 05:34

投稿

yambejp
yambejp

スコア117837

answer CHANGED
@@ -1,3 +1,54 @@
1
1
  そもそもがidが最初から競合しているのでこのHTMLをいくらいじっても
2
2
  まっとうに動かすことはできません
3
- idの付け方を抜本的に検討し直してください
3
+ idの付け方を抜本的に検討し直してください
4
+
5
+ # sample
6
+ ```javascript
7
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8
+ <script>
9
+ $(function() {
10
+ $('#addBtn').click(function(e) {
11
+ var cnt =$('#hogehuga [id^=hogeNm_]').length;
12
+ var dom=$('#hogehuga div:last-child').clone(true);
13
+ dom.find('select[id],input[id]').each(function(){
14
+ var id=$(this).attr('id').replace(/_([0-9]+)$/g,'_'+cnt);
15
+ $(this).attr('id',id);
16
+ });
17
+ dom.find('select[name],input[name]').each(function(){
18
+ var name=$(this).attr('name').replace(/_([0-9]+)$/g,'_'+cnt);
19
+ $(this).attr('name',name);
20
+ });
21
+ console.log(dom.html())
22
+ dom.appendTo($('#hogehuga'));
23
+ });
24
+ });
25
+ </script>
26
+ <table>
27
+ <tbody>
28
+ <tr>
29
+ <td>
30
+ <input type="button" name="addBtn" id="addBtn" value="追加" />
31
+ </td>
32
+ <td id="hogehuga">
33
+ <?php
34
+ $count=3;
35
+ for ( $i = 0; $i < $count; $i++ ) {
36
+ ?>
37
+ <div>
38
+ <input type="text" id="hogeNm_<?= $i ?>" name="hogeNm_<?= $i ?>" />
39
+ <select id="hogeSel_<?= $i ?>" name="hogeSel_<?= $i ?>">
40
+ <option value="0">hoge</option>
41
+ <option value="1">huga</option>
42
+ </select>
43
+ <input type="checkbox" id="hogeChk_0_<?= $i ?>" name="hogeChk_0_<?= $i ?>" />hoge
44
+ <input type="checkbox" id="hugaChk_1_<?= $i ?>" name="hugaChk_1_<?= $i ?>" />huga
45
+ <input type="button" name="btnGO" value="GO" />
46
+ </div>
47
+ <?php
48
+ }
49
+ ?>
50
+ </td>
51
+ </tr>
52
+ </tbody>
53
+ </table>
54
+ ```