表格中的表格行,使用"添加行"按钮。
行中的一个字段是Date,它使用datepicker来选择日期。
问题:
日期选择器不会显示动态生成行的时间。
我正在使用bootstrap 3。
以下是单击按钮时生成表格行的代码。
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 40){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum Players per Entry is 40");
}
}
日期输入的HTML MARKUP:
<div class="form-group">
<label for="InputDatePicker">Date:</label>
<input type="text" class="form-control" placeholder="Select Date" id="InputDatePicker">
</div>
JAVASCRIPT在输入上调用datepicker函数
<script>
$('#InputDatePicker').datepicker();
</script>
更新代码以添加新行并初始化DATEPICKER
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 40){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
$('#InputDatePicker').datepicker();
}else{
alert("Maximum Players per Entry is 40");
}
}
答案 0 :(得分:1)
大概你的意思是说你正在使用the jQuery UI Datepicker plugin? (或类似的东西?)在这种情况下,你永远不会在动态添加的元素上初始化插件:
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
听起来您已成功向页面添加新元素。但是一旦添加了这些元素,您需要定位应该是Datepicker的那个元素并在这些元素上初始化插件:
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
$(someSelector).datepicker();
someSelector
的价值完全取决于您,我不知道您的加价。但这个想法是你需要唯一地识别需要成为Datepickers的新添加的元素。在页面加载时初始化插件仅初始化当时存在的元素,而不是稍后添加的元素。
更新:
根据你的jQuery选择器:
$('#InputDatePicker').datepicker();
您正在识别一个id
为&#34; InputDatePicker&#34;的元素。所以发生了两件事之一:
id
,这意味着此选择器不会选择它们。在这种情况下,您需要选择新添加的元素。id
,这意味着您的HTML无效且代码的行为未定义。在这种情况下,您需要修复HTML,这样您就不会重复使用id
值并相应地更新您的选择器。根据定义,id
值必须是唯一的。