日期选择器的问题：缺少实例数据

我对代码做了一些更改，因为有很多不是真正需要的部分。var keys;    var myValue;    var myVar;    var myTableRows = [];    var c;    var myRow;    var myCol;json = [{    ShipperID: 1,    CompanyName: "Federal Package",    Phone: "(503) 555-9931"  },  {    ShipperID: 2,    CompanyName: "United Package",    Phone: "(503) 655-7865"  },  {    ShipperID: 3,    CompanyName: "My Package",    Phone: "(508) 955-8997"  }];getMyData();function generateDateInput() {  let input = $('<input>').attr({'type': 'text', 'class': 'datepicker-1'});  input.datepicker();  input.on('focus', function() {    // The datepopup activates by the focus, not by the click.    // So let's remove every input which is not in focus.    $('.myTable input:not(:focus())').remove();  }).on('click', function(event) {    // This needed to stop bubbling effect down to the tr.    event.stopPropagation();  });    return input;}function getMyData() {  let myData = json[0];  let myTablehead = [];  myTablehead.push(myData);  let table = '';  for (let i = 0; i < json.length; i++) {    myTableRows.push(json[i])  }  myTablehead.forEach(function(val) {    keys = Object.keys(val);    //html table starts here    table = $('<table>', document).attr({'class': 'myTable', 'id': 'myelement'});    let tr = $('<tr>');    keys.forEach(function(key) {      tr.append($("<th>").text(key));    });    table.append(tr);  });  let tbody = $('<tbody>').attr('id', 'myRows');  myTableRows.forEach(function(val) {    mykeys = Object.keys(val);    //Set up the html row    let tr = $('<tr>').attr('class', 'thisRow');    for (var mykeys in val) {      tr.append(        $('<td>').attr('class', 'normalBtn').text(val[mykeys])      );    }        tr.append(      $('<td>').attr('class', 'dateBtn').text('Enter Date:').append(generateDateInput())    ).on('click', function() {      $('td:eq(3)', this).append(generateDateInput());      // After append we set the focus to the input field from the current row. This      // will only work in the current form until there's only one input field.      $('input', this).focus();    });        tbody.append(tr);  });  table.append(tbody);  $('#container').append(table);}#myelement {      width: 80%;      margin: auto;      border: 0.06em solid #999;      border-spacing: 0.3em;      box-shadow: 0.7em 0.7em 0.7em #999;      background: #a1deee;    }    #myelement td {      width: 10%;      padding: 0.5em;      border: 0.1em solid #000;      font-size: 15px;      text-align: center;      cursor: pointer;      }    button {      width: 10%;      padding: 0.5em;      border: 0.1em solid #000;      font-size: 15px;      text-align: center;      cursor: pointer;      }    button:hover {      background-color: #0F5897;      border: 1px solid #0F5897;    }<html>  <head>    <meta content="text/javascript; charset=UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>      </head>  <body>    <div id="container">      <p class="message box"></p>    </div>  </body></html>

日期选择器的问题：缺少实例数据

1回答