javascript Jquery .datepicker() - 在动态表上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13383711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery .datepicker() - on a dynamic table
提问by Har
I am trying to create a dynamic table with each row containing two date fields. I am using Jquery datepicker. For some reason only the first row is showing in the date picker calendar. Other dynamically created fields are not showing the calendar. I should mention that the first row is by default in place when this page is loaded. Only from the second line it's dynamically created. All solutions say I should reinitialize the .datepicker(). I did and it's not working. I tried changing names and Ids still no solution. Is there something I am missing here. Below is the code used for this purpose.
我正在尝试创建一个动态表，每行包含两个日期字段。我正在使用 Jquery 日期选择器。出于某种原因，日期选择器日历中仅显示第一行。其他动态创建的字段不显示日历。我应该提到第一行在加载此页面时默认就位。仅从第二行开始它是动态创建的。所有解决方案都说我应该重新初始化 .datepicker()。我做了，但它不起作用。我尝试更改名称和 Ids 仍然没有解决方案。有什么我在这里想念的吗。下面是用于此目的的代码。
Yes I know there are several questions related to this here in this site. But some how I couldn't find a solution to this as they aren't working for me.
是的，我知道本网站有几个与此相关的问题。但是有些我无法找到解决方案，因为它们对我不起作用。
Javascript:
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>
回答by SachinGutte
Not necessary to assign unique ids to each field. Datepicker can identify each uniquely. Try putting following code in your js.
没有必要为每个字段分配唯一的 id。Datepicker 可以唯一地识别每个。尝试将以下代码放入您的 js 中。
$('.datepicker').each(function(){
$(this).datepicker();
});
I've used it for multiple fields.
我已经将它用于多个领域。
*Update*
*更新*
I read your js code and it's messed up. All you want to do is (from what you've stated) is when user clicks on Add Another Link, you want to add a new row in table and want them to be able to work with jQuery datepicker. Right?
我读了你的 js 代码，它搞砸了。您想要做的就是（根据您所说的）当用户单击Add Another Link 时，您想在表中添加一个新行并希望他们能够使用 jQuery datepicker。对？
The reason above code is not working is, in this case, text fields are being added dynamically . While datepcikergets initialized on onDocumentReady. So datepicker can not attach itself to these newly created form fields. A solution is to attach datepicker while creating new fields itself.
上面代码不起作用的原因是，在这种情况下，文本字段是动态添加的。虽然datepciker在 上初始化onDocumentReady。因此 datepicker 无法将其自身附加到这些新创建的表单字段。一种解决方案是在创建新字段本身时附加日期选择器。
Here's a working model I prepared for what you want to achieve. See demo on http://jsfiddle.net/phazorrise/bRE6q/
这是我为您想要实现的目标准备的工作模型。请参阅http://jsfiddle.net/phazorrise/bRE6q/ 上的演示
回答by Har
here is my updated code
这是我更新的代码
Javascript Modified at the bottom of the above javascript
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
});
