Question

我试图在动态创建的表格中显示datetimepicker框，这是我的代码。

<body>
        <div class="table-responsive">
                                    <select id="NumOfRow" name="NumOfRow" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                   <input id="DateOfBirth" type="text" /> // this one is working
                        <div id="adTable"></div>
    </div>
<script src="~/lib/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/lib/jquery/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script type="text/javascript">

        $("#DateOfBirth").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            yearRange: "-77:+00"
        });
        $("#DateOfBirth").datepicker("option", "showAnim", "clip");

        $(document).ready(function () {
            $('#NumOfRow').change(function () {
                CreateTable();
            });
        });

        function CreateTable() {
            $('#adTable').empty();
            var x = $('#NumOfRow').val();
            var data = '';
            var complete = '';
            var y = 2;
            for (i = 1; i < x; i++) {

                data = '<table>' +
                    '<tr>' +
                    '<td>' +
                    'Vessel Name' +
                    '</td>' +
                    '<td>' +
                    '<input id="Name" type="text"/>' +
                    '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td> Date Of Birth </td>' +
                    '<td><input id="datetimepick" type="text"/></td>' +
                    '</tr>' +
                    '</table>';    
                y += 1;
                complete += data;

                $("#datetimepick").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy",
                    yearRange: "-77:+00"
                });
                $("#datetimepick").datepicker("option", "showAnim", "clip");    
            }
            $('#adTable').append(complete);
        }
    </script>
</body>

可以毫无问题地生成表格，但是，datetimepicker不会显示在动态生成的输入中。有谁知道可能是什么问题？

由于

Answer 1

你追加后你必须这样做你也不能将多个datetimepicker添加到一个ID，你应该把它变成一个类

HTML

<body>
  <div class="table-responsive">
    <select id="NumOfRow" name="NumOfRow" class="form-control">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <input id="DateOfBirth" type="text" /> // this one is working
    <div id="adTable"></div>
  </div>
  <script src="~/lib/jquery/jquery-2.1.1.min.js"></script>
  <script src="~/lib/jquery/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<!-- edit: Try with these cdn's if you're not sure your src's are correct -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>

JQUERY

$("#DateOfBirth").datepicker({
  changeMonth: true,
  changeYear: true,
  dateFormat: "dd/mm/yy",
  yearRange: "-77:+00"
});
$("#DateOfBirth").datepicker("option", "showAnim", "clip");

$(document).ready(function() {
  $('#NumOfRow').change(function() {
    CreateTable();
  });
});

function CreateTable() {
  $('#adTable').empty();
  var x = $('#NumOfRow').val();
  var data = '';
  var complete = '';
  var y = 2;
  for (i = 1; i < x; i++) {

    data = '<table>' +
      '<tr>' +
      '<td>' +
      'Vessel Name' +
      '</td>' +
      '<td>' +
      '<input id="Name" type="text"/>' +
      '</td>' +
      '</tr>' +
      '<tr>' +
      '<td> Date Of Birth </td>' +
      '<td><input class="datetimepick" type="text"/></td>' +
      '</tr>' +
      '</table>';
    y += 1;
    complete += data;

  }
  $('#adTable').append(complete);
  $(".datetimepick").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yy",
    yearRange: "-77:+00"
  });
  $(".datetimepick").datepicker("option", "showAnim", "clip");
}

的jsfiddle

https://jsfiddle.net/gmuwpytz/

MVC Core DateTimePicker未显示在动态创建的表中

1 个答案: