猿问

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

我有一个使用 json 数据创建的动态 HTML 表。我想为 datapicker 插件创建一个额外的列。我的要求是，当我单击相应行的特定数据选择器单元格时，应在该单元格中创建一个输入字段。单击此输入时，应调用该特定行的数据选择器。我应该能够从内联日历中获取我选择的日期（此功能由数据选择器提供）。在我的情况下，此日期获取没有发生，而是出现此错误：未捕获丢失的实例数据这个日期选择器 这是代码的 jsfiddle 链接： https ://jsfiddle.net/0akqg9b8/3/

<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>


  </head>


  <body>

    <div id="container">

      <p class="message box"></p>

    </div>

    <style>

      #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 tr{

       color: blue;

    }

    #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;

    }

    </style>


    <script>

 var keys;

    var myValue;

    var myVar;

    var myTableRows = [];

    var html;

    var table;

    var c;

    var myRow;

    var myCol;



忽然笑
浏览 98回答 1
1回答

精慕HU

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

相关分类

Html5
我要回答