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

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

Html5

忽然笑 2023-08-21 19:36:58

我有一个使用 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;

查看完整描述

1 回答

精慕HU

TA贡献1845条经验获得超8个赞

我对代码做了一些更改，因为有很多不是真正需要的部分。

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>

</head>

<body>

</div>

</body>

</html>

反对回复 2023-08-21

1 回答
0 关注
64 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

1 回答

添加回答