我有一個使用 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>
<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 回答
- 0 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消