javascript - 下拉日历未出现在 html 表中新插入的行中

Question

我有一个带有日历的表单个输入字段，当我单击输入下拉日历时将选择日期。 通过使用 javascript，我在表中插入一个新行。行正在表中插入，但日期日历未出现在新插入的行日期字段中，如上行所示。 我正在使用以下代码

function addRow() {
  var table = document.getElementById("mintable");
  var rowCount = parseInt(document.getElementById("minRows").value);
  var rowInsert = parseInt(document.getElementById("sizemin").value);
  var row = table.insertRow(rowInsert + 1);
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "text";
  element1.id = "minenddate" + (rowCount);
  element1.className = "form-control";
  cell1.appendChild(element1);

  rowCount = parseInt(rowCount) + 1;
  document.getElementById("minRows").value = rowCount;
  document.getElementById("sizemin").value =
    parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {

  count = document.getElementById("minsize").value;
  i = 0;
  dateId = "datepicker2";
  for (i = 0; i <= (count + 1); i++) {
    dateId = "#datepicker2" + i;
    $(dateId).datepicker();

  }

});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<input type="hidden" id="minsize" value="1">
<div class="">
  <table id="mintable" class="table table-bordered table-striped stripe hover row-border">
    <thead class="div-head">
      <tr>
        <th><b>Date</b></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" id='datepicker20' value="2018-08-09" class="form-control"></td>
      </tr>
    </tbody>
  </table>
  <input type="hidden" name="minRows" id="minRows" value='1'>
  <input type="hidden" id="sizemin" name="sizemin" value='1' />

</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon 
       " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />

Answer 1

You have to re-initialize the datepicker on dynamically added elements.

以下是添加方法。

$('#'+element1.id).datepicker();

function addRow() {
  var table = document.getElementById("mintable");
  var rowCount = parseInt(document.getElementById("minRows").value);
  var rowInsert = parseInt(document.getElementById("sizemin").value);
  var row = table.insertRow(rowInsert + 1);
  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "text";
  element1.id = "minenddate" + (rowCount);
  element1.className = "form-control";
  cell1.appendChild(element1);
  $('#' + element1.id).datepicker(); //add this line to initialize
  rowCount = parseInt(rowCount) + 1;
  document.getElementById("minRows").value = rowCount;
  document.getElementById("sizemin").value =
    parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {

  count = document.getElementById("minsize").value;
  i = 0;
  dateId = "datepicker2";
  for (i = 0; i <= (count + 1); i++) {
    dateId = "#datepicker2" + i;
    $(dateId).datepicker();
  }

});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
  <table id="mintable" class="table table-bordered table-striped stripe hover row-border">
    <thead class="div-head">
      <tr>
        <th><b>Date</b></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" id='datepicker20' value="2018-08-09" class="form-control" /></td>
      </tr>
    </tbody>
  </table>
  <input type="hidden" name="minRows" id="minRows" value='1'>
  <input type="hidden" id="sizemin" name="sizemin" value='1' />

</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon 
       " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />