1

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

上面的代码不起作用的原因是，在这种情况下，文本字段正在被动态添加。虽然datepciker在onDocumentReady. 因此 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 回答