堆栈内存溢出
  繁体   English   中英

循环 json 数据并在模态表内显示

[英]Loop json data and display in table inside modal

 原文  2021-01-12 14:47:24  0   1    javascript/ jquery/ ajax

问题描述

我无法循环遍历 JSON object 并在表格中显示某些值。 在该表上，每一行都有一个查看按钮。 当用户单击视图按钮时，将出现一个模式。 我可以显示数据，但在付款明细表上，它总是只显示一个数据。 我搜索了很多关于这个问题的信息，但我看不到任何与我的问题相关的内容。

我的 JSON 数据：

{
    "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": ""
        }
    ]
}

jQuery/ajax：

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> &nbsp;PAYMENT DETAILS</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</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>

1 个解决方案

解决方案1
 2 已采纳  2021-01-12 15:21:53

您不能有重复的 ID。 它们必须是唯一的。

因此，我将模态体的代码从：

<tr>
    <td id="payment_date"></td>
    <td id="payment_amount"></td>
    <td id="payment_remarks"></td>
</tr>

至：

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

我删除了所有 ID，因为您可以按索引寻址每个单元格。 同时我在表中添加了一个 id。

在$.each循环中，您可以.clone()第一个 tbody 行，在 tbody 的末尾使用克隆的元素和 append。

$.each(data.payments, function (i, payment) {
     var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
     x.find('td').eq(0).text(data.payments[i].payment_date);
     x.find('td').eq(1).text(data.payments[i].payment_amount);
     x.find('td').eq(2).text(data.payments[i].payment_remarks);
});

片段： 

 var data = { "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": "" } ] }; var modal = $('#payment-details-modal'); 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) { var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody'); x.find('td').eq(0).text(data.payments[i].payment_date); x.find('td').eq(1).text(data.payments[i].payment_amount); x.find('td').eq(2).text(data.payments[i].payment_remarks); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script> <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> &nbsp;PAYMENT DETAILS</h5> <button type="button" class="close" data-dismiss="modal">&times;</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" id="tbbody"> <thead> <tr> <th>Date</th> <th>Amount Paid</th> <th>Remarks</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </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> </div> <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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在解析 json 数据时放置小数位并在模态输入中显示 循环并显示json数据 JSON数组到HTML表并在td标签内显示数据 如何在 React 中将 JSON 数据渲染为表格 在Bootstrap模式中显示JSON数据-AJAX 在引导程序 4 模态框中显示表格行数据 将模态（来自表格）内的数据提取到 href 在表中显示数据json到react 变量中的json数据并显示在表中 循环wordpress内的模态
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM