#やりたいこと
jQueryで、テーブルの行を追加、削除するというフォームを作成しています。
その後、追加した行のinputでdatepickerを使用したいのですが、
一番上の行しか、datepickerが使用できません。
どこを修正したらよいでしょうか?
HTML
1<table> 2<tr> 3 <!-- 他のフォーム内の項目の行 --> 4 <!-- datepicker を使用しているinput項目も有 --> 5 <!-- datepickerは正常に使用できている --> 6</tr> 7<tr class="type_detail"> 8 <th>テーブル</th> 9 <td colspan="5"> 10 <table class="table-form" id="t_detail"> 11 <thead> 12 <tr> 13 <td> 14 <button name="plus" id="plus" type="button"><img src="img/icon_plus.png"></button> 15 </td> 16 <td>日付</td> 17 <td>数量</td> 18 <td>チェック</td> 19 </tr> 20 </thead> 21 <tbody> 22 <tr style="display:none;"> 23 <td> 24 <button name="minus" class="minus" type="button"><img src="img/icon_minus.png"></button> 25 </td> 26 <td> 27 <input class="datepicker" style="width:20%;" type="text" name="t_date[]" data-order-status /> 28 </td> 29 <td> 30 <input style="width:50%;" type="text" name="amount[]" /> 個 31 </td> 32 <td> 33 <input type="checkbox" name="t_check[]"> 34 </td> 35 </tr> 36 </tbody> 37 </table> 38 </td> 39</tr> 40</table> 41<input type="submit" value="submit">
JS
1jQuery(function($) { 2 $("#plus").on("click", function() { 3// $("#t_detail tbody tr:first-child").clone(true).appendTo("#t_detail tbody"); 4// $("#t_detail tbody tr:last-child").css("display", "table-row"); 5 6 addRow = function () { 7 var lastRow = $('#t_detail tbody > tr:last').after('<tr><td><button name="minus" class="minus" type="button"><img src="img/icon_minus_alt.png" width="18" height="18"></button></td><td><input class="datepicker" style="width:20%;" type="text" name="t_date[]" data-order-status /></td><td><input style="width:50%;" type="text" name="t_amount[]" autocomplete="off" /> 個</td><td><input type="checkbox" name="t_check[]"></td></tr>'); 8 console.log(lastRow); 9 } 10 11addRow(); 12 13 $(".minus").on("click", function() { 14 $(this).parent().parent().remove(); 15 }); 16 }); 17});
■datepickerの使用のためには、以下のように行っています。
JS
1 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 2 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 3 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
https://jqueryui.com/datepicker/ を参照している
JS
1<script> 2$.datepicker.setDefaults($.datepicker.regional['ja']); 3$(function() { 4 $('input[name^="t_date"]').datepicker({ 5 changeMonth: true, 6 changeYear: true, 7 yearRange: ('-2:+2'), 8 showButtonPanel: true 9 }); 10 }); 11</script>
回答2件
あなたの回答
tips
プレビュー