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

您必须重新初始化动态添加的datepicker 元件。

以下是如何添加它。

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

＆＃13;

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();
  }

});

＆＃13;

<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()" />

＆＃13;

下拉日历不会进入html表中的新插入行

1 个答案: