Javascript 循环json数据并在modal内的表中显示
我在循环JSON对象和在表中显示某些值时遇到问题。在该表上，每行都有一个视图按钮。当用户单击view按钮时，将显示一个模式。我可以显示数据，但在付款明细表上，它始终只显示一个数据。我搜索了很多关于这个问题的信息，但没有发现任何与我的问题相关的信息 我的JSON数据：Javascript 循环json数据并在modal内的表中显示,javascript,jquery,ajax,Javascript,Jquery,Ajax,我在循环JSON对象和在表中显示某些值时遇到问题。在该表上，每行都有一个视图按钮。当用户单击view按钮时，将显示一个模式。我可以显示数据，但在付款明细表上，它始终只显示一个数据。我搜索了很多关于这个问题的信息，但没有发现任何与我的问题相关的信息 我的JSON数据： { "sales": [ { "sales_id": "3", "sales_date&q
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
}
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function(i, payment) {
modal.find($('#payment_date')).html(data.payments[i].payment_date);
modal.find($('#payment_amount')).html(data.payments[i].payment_amount);
modal.find($('#payment_remarks')).html(data.payments[i].payment_remarks);
});
}
});
}
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
}
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function(i, payment) {
modal.find($('#payment_date')).html(data.payments[i].payment_date);
modal.find($('#payment_amount')).html(data.payments[i].payment_amount);
modal.find($('#payment_remarks')).html(data.payments[i].payment_remarks);
});
}
});
}
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
}
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function(i, payment) {
modal.find($('#payment_date')).html(data.payments[i].payment_date);
modal.find($('#payment_amount')).html(data.payments[i].payment_amount);
modal.find($('#payment_remarks')).html(data.payments[i].payment_remarks);
});
}
});
}
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
付款详情
&时代；
销售详情
日期
采购订单号
这么多
博士编号
SI数
详情
媒体
付款详情
日期
已付金额
评论
总费用：
支付总额：
余额：
接近
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
var数据={
“销售”：[
{
“销售标识”：“3”，
“销售日期”：“2021-01-12 01:26:33”，
“销售订单”：“100549”，
“销售订单”：“1234”，
“销售部”：“5768”，
“销售司”：“1794”，
“销售详情”：“仅限授权人员”，
“销售媒体”：“辛特拉岛贴纸”，
“销售净额”：“8601.60”，
“销售余额”：“4601.60”
}
],
“付款”：[
{
“付款id”：“3”，
“付款金额”：“1000.00”，
“付款日期”：“2021-01-15”，
“付款备注”：
},
{
“付款id”：“4”，
“付款金额”：“1000.00”，
“付款日期”：“2021-01-18”，
“付款备注”：
},
{
“付款id”：“5”，
“付款金额”：“2000.00”，
“付款日期”：“2021-01-29”，
“付款备注”：
}
]
};
var模式=$（“#付款明细模式”）；
控制台日志（数据）；
modal.modal（'show'）；
modal.find（$（'#sales_date'））.html（data.sales[0].sales_date）；
modal.find（$（'#sales_po'））.html（data.sales[0].sales_po）；
modal.find（$（'#sales_so'））.html（data.sales[0].sales_so）；
modal.find（$（'#sales_dr'））.html（data.sales[0].sales_dr）；
modal.find（$（'#sales_si'））.html（data.sales[0].sales_si）；
modal.find（$（'#sales_details'））.html（data.sales[0].sales_details）；
modal.find（$（'#sales_media'））.html（data.sales[0].sales_media）；
美元（数据、付款、功能（i、付款）{
var x=$（'#tbbody tbody tr:first'）.clone（）.appendTo（'#tbbody tbody'）；
x、 查找（'td'）.eq（0）.文本（data.payments[i].payment\u date）；
x、 查找（'td'）.eq（1）.文本（data.payments[i].payments\u amount）；
x、 查找（'td'）.eq（2）.文本（data.payments[i].payments_备注）；
});
付款详情
&时代；
销售详情
日期
采购订单号
这么多
博士编号
SI数
详情
媒体
付款详情
日期
已付金额
评论
总费用：
支付总额：
余额：