Question

表格中的表格行，使用＆＃34;添加行＆＃34;按钮。

行中的一个字段是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");

    }
}

Answer 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值必须是唯一的。

html - javascript无法在动态生成的html表单中工作

1 个答案: