各行に 2 つの日付フィールドを含む動的テーブルを作成しようとしています。Jquery デートピッカーを使用しています。何らかの理由で、最初の行のみが日付ピッカー カレンダーに表示されます。他の動的に作成されたフィールドにはカレンダーが表示されません。このページがロードされると、デフォルトで最初の行が配置されます。動的に作成されるのは 2 行目からのみです。すべてのソリューションは、.datepicker() を再初期化する必要があると言っています。私はやったが、うまくいかない。名前とIDを変更しようとしましたが、まだ解決策がありません。私がここに欠けているものはありますか?以下は、この目的で使用されるコードです。
はい、このサイトでこれに関連する質問がいくつかあることは知っています。しかし、彼らが私のために働いていないので、これに対する解決策を見つけることができなかった方法もあります。
Javascript:
$("#addurl").click(function(){
var idValue = "input[id='breachCount']";
var counter = $(idValue).val();
var trValue = $("#rowPH"+counter).html();
var countNew = parseInt(counter)+1;
$(idValue).val(countNew);
var newFile = "<tr id='rowPH"+countNew+"'>"+trValue+"</tr>";
$(newFile).insertBefore("#addLink");
var nameTemp, actNm;
var dcounter=0;
$('#rowPH'+countNew+' input').each(function(){
nameTemp = $(this).attr("name");
if(nameTemp){
actNm = nameTemp.substring(nameTemp.indexOf("."));
$(this).attr("name","breachList["+countNew+"]"+actNm+countNew);
}
});
$('.datepicker').each(function(i) {
this.id = 'datepicker' + i;
}).datepicker();
});
HTML:
<table>.....
<tr id="rowPH0">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[0].breachText">
</td>
<td>
<input id="datepicker0" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].activationDt"><img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker1" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[0].deactivationDt">
<input type="checkbox" name="breachList[0].deactiveNa" checked="checked">
</td>
<td>
<input class="text_box_2" type="text" value="" name="breachList[0].note">
</td>
</tr>
</tbody>
<tbody>
<tr id="rowPH1">
<td>
<input type="checkbox" checked="checked">
</td>
<td>
<input class="text_box_2 div_center" type="text" value="" name="breachList[1].breachText1">
</td>
<td>
<input id="datepicker2" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].activationDt1">
<img class="calendar" src="assets/images/calendar_icon.png">
</td>
<td>
<input id="datepicker3" class="datepicker date_txt hasDatepicker" type="text" value="" name="breachList[1].deactivationDt1">
<input type="checkbox" name="breachList[1].deactiveNa1" checked="checked">
</td>
<td>
</tr>
<tr id="addLink">
<td colspan="5" ><a href="javascript:void(0);" id="addurl">+ Add another row</a>
<input type="hidden" id="breachCount" value="${fn:length(auditStandardBreachsForm.breachList)-1}"/>
</td></tr>
...</table>