JSON对象中的第一个条目没有在JavaScript中设置？
我遇到了一个无法找到解决方案的奇怪问题。
我对javascript一点都不陌生，所以饶了我。
我试图在json对象中保存表单的条目。因此，每当单击保存按钮时，表单的当前值将保存到具有数字索引的json对象中，但问题是第一组条目未保存到对象，第一个索引也没有。
悬停它似乎从那里工作正常，即2,3，...，n正在得到正确的保存。这里的代码有点难看。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
let data = new Object;
let serial = 1;
let bookName;
let publication;
let mrp;
let qty;
let bookCode;
let purchasePrice;
let discount;
let date;
let invoiceNo;
let refNo;
let supplier;
let subject;
let author;
let shelfPos;
function setData(index) {
data[index] = {
'bookName' : bookName,
'publication' : publication,
'mrp' : mrp,
'qty' : qty,
'bookCode' : bookCode,
'purchasePrice': purchasePrice,
'discount' : discount,
'date' : date,
'invoiceNo' : invoiceNo,
'refNo' : refNo,
'supplier' : supplier,
'subject' : subject,
'author' : author,
'shelfPos' : shelfPos
};
}
function getTemplate(index) {
return template = `<tr>
<td>${index}</td>
<td>${bookName}</td>
<td>${publication}</td>
<td>${mrp}</td>
<td>${qty}</td>
<td>${bookCode}</td>
<td>${purchasePrice}</td>
<td>${discount}</td>
</tr>`;
}
$(function(){
setData(serial);
$('.entry_preview').css('max-height', $(window).height());
$("#datepicker").datepicker();
$('.btn-add').on('click', function() {
bookName = $('input[name=bookName]').val();
publication = $('select[name=publication]').find(':selected').text();
mrp = $('input[name=mrp]').val();
qty = $('input[name=qty]').val();
bookCode = $('input[name=code]').val();
purchasePrice = $('input[name=purchasePrice]').val();
discount = $('input[name=discount]').val();
date = $('input[name=date').val();
invoiceNo = $('input[name=invoiceNo').val();
refNo = $('input[name=refNo').val();
supplier = $('select[name=supplier').find(':selected').text();
subject = $('input[name=subject').val();
author = $('input[name=author').val();
shelfPos = $('input[name=shelfPos').val();
$('.entry_preview tbody').append(getTemplate(serial));
setData(serial);
serial++;
});
function sendData(jsonData) {
var jsonString = JSON.stringify(jsonData);
var request;
request = new XMLHttpRequest()
request.open("POST", "db.php", true)
request.setRequestHeader("Content-type", "application/json")
request.send(jsonString)
}
})body {
font-family: Roboto;
background-color: #fff; }
.top-bar {
width: 100%;
height: 50px;
background-color: #292c31; }
.top-bar .header {
width: 80%;
margin: 0 auto;
font-size: 20px;
font-weight: bold;
line-height: 50px;
color: #22a3a9; }
.form {
min-width: 1000px;
max-width: 1366px;
margin-left: 10%;
padding-top: 30px;
background-color: #fff;
display: table;
clear: both;
content: ''; }
.form .action_type {
width: 100%;
margin-bottom: 30px;
padding: 10px 0;
background-color: #292c31;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 5px 5px 0 0; }
.form .action_type .action {
min-width: 150px;
border-radius: 5000px;
padding: 10px 20px;
margin: 10px 20px;
color: #fff;
background-color: #22a3a9; }
.form .action_type .action [type="radio"]:checked,
.form .action_type .action [type="radio"]:not(:checked) {
position: absolute;
left: -9999px; }
.form .action_type .action [type="radio"]:checked + label,
.form .action_type .action [type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block; }
.form .action_type .action [type="radio"]:checked + label:before,
.form .action_type .action [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff; }
.form .action_type .action [type="radio"]:checked + label:after,
.form .action_type .action [type="radio"]:not(:checked) + label:after {
content: '';
width: 18px;
height: 18px;
background: #292c31;
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.form .action_type .action [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); }
.form .action_type .action [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.form table {
float: left; }
.form td {
display: inline-block;
margin: 0 5px; }
.form label,
.form select {
display: block;
margin-bottom: 5px;
margin-top: 10px;
padding-left: 10px;
font-size: 15px;
color: #5A5A5A; }
.form input[type=text],
.form select {
border-radius: 500px;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border: 1px solid #c9c9c9;
width: 200px;
padding: 5px 0 5px 10px;
font-size: 15px;
color: #22a3a9; }
.form .td-short {
max-width: 90px; }
.form .td-short:nth-child(3) {
padding-right: 20px; }
.form input[name=qty],
.form input[name=mrp] {
display: block;
width: 90px; }
.form input[name="barcode"] {
width: 440px; }
.form button {
text-align: center;
background-color: #22a3a9;
border: none;
color: #fff;
border-radius: 500px;
cursor: pointer; }
.form .btn-add {
padding: 10px 88px; }
.form .btn-clear {
padding: 10px 68px; }
.entry_preview {
width: 100%;
min-height: auto;
oaverflow-y: scroll;
background-color: #fff; }
.entry_preview table {
width: 100%;
height: 100%; }
.entry_preview table th {
padding-top: 5px;
padding-bottom: 5px;
border: none;
margin-bottom: 5px;
color: #292c31;
background-color: #e6e6e6;
font-weight: 300; }
.entry_preview table tr {
text-align: center; }
.entry_preview input[name=save] {
position: fixed;
bottom: 10px;
right: 10px;
border-radius: 500px;
background-color: #22a3a9;
color: #fff;
padding: 10px 20px;
cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<!-- <link rel="stylesheet" href="css/foundation.css"> -->
</head>
<body>
<div class="top-bar">
<div class="header">Book Software</div>
</div>
<div class="form">
<!-- <div class="action_type">
<div class="action">
<input type="radio" name="entryType" value="newEntry" id="new_entry" value="newEntry"><label for="new_entry" >New Entry</label>
</div>
<div class="action">
<input type="radio" name="entryType" value="updateEntry" id="update_entry" value="updateEntry"><label for="update_entry" >Edit Existing Entry</label>
</div>
</div> -->
<table class="left">
<tbody>
<tr>
<td><label>Ref. No.</label><input name="refNo" type="text"></td>
<td><label>Invoice No.</label><input name="invoiceNo" type="text"></td>
<td><label>Date</label><input name="bookCode" type="text" id="datepicker"></td>
</tr>
<tr>
<td>
<label>Supplier</label>
<select name="supplierName">
<option value="supplier-1" >Supplier-1</option>
<option value="supplier-2" >Supplier-2</option>
<option value="supplier-3" >Supplier-3</option>
<option value="supplier-4" >Supplier-4</option>
<option value="supplier-5" >Supplier-5</option>
</select>
</td>
<td>
<label>Publication</label>
<select name="publication">
<option value="publisher-1" >Publisher-1</option>
<option value="publisher-2" >Publisher-2</option>
<option value="publisher-3" >Publisher-3</option>
<option value="publisher-4" >Publisher-4</option>
<option value="publisher-5" >Publisher-5</option>
</select>
</td>
<td><label>Discount</label><input disabled name="discount" type="text"></td>
</tr>
<tr>
</tr>
<tr>
<td><label>Book Name</label><input type="text" name="bookName"></td>
<td class="td-short"><label>Qty</label><input name="qty" type="text"></td>
<td class="td-short"><label>MRP</label><input type="text" name="mrp"></td>
<td><label>Purchase Price</label><input name="purchasePrice" type="text"></td>
</tr>
<tr>
<td><label>Book Code</label><input name="code" type="text"></td>
<td><label>Shelf Position</label><input name="shelfPos" type="text"></td>
<td><label> </label><button class="btn-add"> + Add</button></td>
</tr>
<tr>
<td><label>Subject</label><input name="subject" type="text"></td>
<td><label>Author</label><input name="author" type="text"></td>
<td><label> </label><button class="btn-clear">Clear Form</button></td>
</tr>
</tbody>
</table>
<div class="controls">
</div>
</div>
<div class="entry_preview">
<form id="invoice-form" action="db.php" method="post">
<!-- <input type="submit" name="submit" value="save"> -->
<table>
<thead>
<tr>
<th>S.No.</th>
<th>Book Name</th>
<th>Publication</th>
<th>MRP</th>
<th>Qty</th>
<th>Book Code</th>
<th>Purchase Price</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<input type="submit" name="save" value="save">
</tfoot>
</table>
</form>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- <script src="js/vendor/what-input.js"></script> -->
<!-- <script src="js/vendor/foundation.js"></script> -->
<script src="js/app.js"></script>
</body>
</html>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？