表上带有ajax调用的TD文本未清除以前的数据 [英] Td text with ajax call on table not clearing previous data

问题描述

我有一个包含付款明细的付款表，每个表行都有一个查看按钮.我的问题是，当模式打开时，您会看到第一张表行为空.

I have a payment table that contains details of payment and each table row has a view button. My problem is when the modal is open you will see the first table row is blank.

空白表格行:

第二，当我关闭模态并再次打开模态时，它将如下所示:

Second, when I close the modal and open the modal again it will look like this:

我看到的另一件事是，当我打开另一个付款明细时，它将看起来像这样.如您所见，这三种数据支付是针对先前打开的模式.

Another thing I've seen is when I open another payment details it will look like this. As you can see the three data payments are for the previous opened modal.

摘要:

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>

这是我尝试过的:

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) {
           
            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);

            });

            modal.find($('#sales_net_amount')).html('₱ ' + data.sales[0].sales_net_amount);
            //modal.find($('#total_paid')).html('₱ ' + total_amount);
            modal.find($('#total_balance')).html('₱ ' + data.sales[0].sales_balance);
        }
    });
}

推荐答案

您的 tbody 有一个 tr 用于克隆，因此请使显示:没有，并且当您克隆该tr时，删除该 display:none .此外，要清空 tbody ，请期待您可以使用的第一个 tr $('#tbbody tbody tr:not(:first-child)').remove(); .

Your tbody have one tr which you are using for cloning so make that display:none and when you clone that tr remove that display:none .Also, to empty tbody expect the first tr you can use $('#tbbody tbody tr:not(:first-child)').remove();.

演示代码 :

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": ""
    }
  ]
};
//when modal show ..
$(document).on("shown.bs.modal", "#payment-details-modal", function() {

  var modal = $('#payment-details-modal');
  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);
  $('#tbbody tbody tr:not(:first-child)').remove(); //remove all trs except first
  //if payements key is there get length or else 0
  var length = (data.payments != undefined) ? data.payments.length : 0
  console.log("---"+length)
  if(length > 0 ){
  $.each(data.payments, function(i, payment) {
    var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
    x.attr('style', '') //after clone remove style(display:none)
    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);
  });
  
  }else{
  //else part
   $('#tbbody tbody').append("<tr><td>No Result Found</td></tr>")
  
  }
})

<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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#payment-details-modal">Open Modal</button>

<div id="payment-details-modal" class="modal fade">
  <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>
              <!--added display none-->
              <tr style="display:none">
                <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>

这篇关于表上带有ajax调用的TD文本未清除以前的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！