将 JSON 数据的问题附加到 HTML 表

Question

将 json 数据显示到 html 表后出现问题。

问题；

1. 每次更改product_id时，表值总是添加新数据。
2. 如果结果为空，tbody 表仍然显示当前之前的数据。

这是我的代码：

<table class="table" id="history_maintenance">
  <thead>
    <th>Date In</th>
    <th>SPK No</th>
    <th>Purchase No</th>
    <th>Maintenance Notes</th>
  </thead>
  <tbody></tbody>
</table>

<script>
$('#product_id').on('change', function() {

let customer_name = document.getElementById("customer_name").value;
let phone = document.getElementById("phone").value;
let car_plate_no = document.getElementById("car_plate_no").value;
let car_type = document.getElementById("car_type").value;
let product_id = document.getElementById("product_id").value;

$.ajax({
    type: "POST",
    url: "<?php echo base_url('spk/get_customer_transaction_history') ?>",
    dataType: "json",
    cache: false,
    data: {
        customer_name: customer_name,
        phone: phone,
        car_plate_no: car_plate_no,
        car_type: car_type,
        product_id: product_id,
    },

    success: function(dataHistory) {
      let transactionHistory = '';

      for (i = 0; i < dataHistory.length; i++) {
        transactionHistory += '<tr>';
        transactionHistory += '<td>' + dataHistory[i].date_in + '</td>';
        transactionHistory += '<td>' + dataHistory[i].spk_no + '</td>';
        transactionHistory += '<td>' + dataHistory[i].purchase_no + '</td>';
        transactionHistory += '<td>' + dataHistory[i].spk_maintenance_notes + '</td>';
        transactionHistory += '</tr>';
      }

      $('#history_maintenance tbody').append(transactionHistory);
    }
   });
   return false;
});
</script>

Answer 1

感谢@EL_vanja 的提示

我添加这个：

$('#history_maintenance tbody').html('');

之前：

let transactionHistory = '';