javascript - 日期选择器无法在动态添加的行中工作

Question

当在表中动态添加一行时，我没有得到第二行的日期选择器、时间微调器或验证。

我的添加行代码...

function addRow(tableID){
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;

  for(var i = 0;i<colCount;i++){

     var newccell = row.insertCell(i);
     newcell.innerHTML = table.rows[i].cells[i].innerHTML;

  }
}

我的按钮代码是

<input type = "button" onclick = "addRow(tableID)" name="+" value="+" id="add">

Answer 1

一旦元素渲染到 dom，您就需要初始化动态元素的插件/小部件

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < colCount; i++) {
        var newccell = row.insertCell(i);
        newcell.innerHTML = table.rows[i].cells[i].innerHTML;
    }

    var $row = $(row);
    $row.find('input.spinner').spinner(){};//initialize spinner
    $row.find('input.datepicker').datepicker({});//iniitailze datepicker etc
}

使用克隆

function addRow(tableID) {
    var $table = $('#' + tableID),
        $first = $table.find('tr').first();
    var $row = $first.clone().appendTo($table)
    $row.find('input.spinner').spinner() {};
    $row.find('input.datepicker').datepicker({});
}