Question

我正在尝试创建一个动态表，每行包含两个日期字段。我正在使用Jquery datepicker。出于某种原因，只有第一行显示在日期选择器日历中。其他动态创建的字段未显示日历。我应该提一下，当加载此页面时，默认情况下第一行就位。仅从第二行开始动态创建。所有解决方案都说我应该重新初始化.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>

Answer 1

无需为每个字段分配唯一ID。 Datepicker可以唯一地识别每个。尝试将以下代码放入js。

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

我已将它用于多个领域。

*的更新 *

我读了你的js代码，它搞砸了。你想要做的就是（根据你所说的）当用户点击添加另一个链接时，你想在表中添加一个新行并希望它们能够使用jQuery datepicker 。对？

上述代码无效的原因是，在这种情况下，文本字段是动态添加的。在datepciker上初始化onDocumentReady时。因此，datepicker无法将自身附加到这些新创建的表单字段。解决方案是在创建新字段时附加datepicker。

这是我为你想要达到的目标而准备的工作模型。请参阅http://jsfiddle.net/phazorrise/bRE6q/
上的演示

Answer 2

这是我更新的代码

的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
 });

Jquery .datepicker（） - 在动态表上

2 个答案: