1

各行に 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>
4

2 に答える 2

6

各フィールドに一意のIDを割り当てる必要はありません。Datepickerはそれぞれを一意に識別できます。次のコードをjsに入れてみてください。

$('.datepicker').each(function(){
    $(this).datepicker();
});

複数の分野で使用しています。

*更新*

私はあなたのjsコードを読みました、そしてそれはめちゃくちゃです。あなたがしたいのは（あなたが述べたことから）ユーザーがAdd Another Linkをクリックしたときに、テーブルに新しい行を追加し、jQuerydatepickerで動作できるようにすることです。右？

上記のコードが機能しない理由は、この場合、テキストフィールドが動的に追加されているためです。でdatepciker初期化されonDocumentReadyます。したがって、datepickerは、これらの新しく作成されたフォームフィールドに自分自身をアタッチできません。解決策は、新しいフィールド自体を作成するときにdatepickerをアタッチすることです。

これが、あなたが達成したいことのために私が準備した実用的なモデルです。http://jsfiddle.net/phazorrise/bRE6q/のデモを参照してください

于 2012-11-14T17:20:02.830 に答える
1

ここに私の更新されたコードがあります

Javascript 上記の javascript の下部を変更

var nameTemp, actNm;
$('#rowPH'+countNew+' input').each(function(){
    nameTemp = $(this).attr("name");
    if(nameTemp){
      actNm = nameTemp.substring(nameTemp.indexOf("."));
      $(this).attr("name","breachList["+countNew+"]"+actNm);
      $(this).attr("id","breachList["+countNew+"]"+actNm+countNew); //added 
    }
});
$('.datepicker').each(function(i) {
    $(this).removeClass('hasDatepicker').datepicker(); //changed ref: phazor comment
 });
于 2012-11-15T11:31:23.140 に答える