为什么往空数组中新增元素后，表格会重复渲染历史条目？

问题原因 #

每次触发添加操作时，代码都会遍历全量订单数组，把所有历史订单重新生成行追加到表格末尾，而旧的已渲染行没有被清理，自然会出现条目重复的问题。

解决方法 #

这里提供两种可选方案：

方案1：每次渲染前清空表格（逻辑简单，适合数据量不大的场景） #

只需要在遍历订单生成行之前，清空表格现有内容即可，修改后的JS代码如下：

const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

let orders = []
addMore.addEventListener("click", function(e) {
  e.preventDefault()
  let order = {
    productName: document.getElementById("pName").value,
    productPrice: document.getElementById("pPrice").value,
    qty: document.getElementById("qty").value,
    total: document.getElementById("total").value,
  }
  orders.push(order)
  tForm.reset();

  // 新增这行，清空表格原有内容
  table.innerHTML = ''

  orders.forEach(allOrder => {
    let row = document.createElement("tr")
    Object.values(allOrder).forEach(text => {
      let cell = document.createElement("td")
      let texNode = document.createTextNode(text)
      cell.appendChild(texNode)
      row.appendChild(cell)
    })
    table.appendChild(row)
  })
})

function addNumber() {
  var x = document.getElementById("pPrice").value;
  var y = document.getElementById("qty").value;
  var z = document.getElementById("amount").value;
  var disc = document.getElementById("disc").value
  var discTotal = y * x * disc / 100;
  document.getElementById("total").value = (y * x) - z - discTotal;
}

方案2：仅渲染新增订单（性能更高，无需重复渲染历史数据） #

不需要每次都遍历全量订单，直接给最新提交的这条订单生成行插入表格即可，修改后的JS代码如下：

const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

let orders = []
addMore.addEventListener("click", function(e) {
  e.preventDefault()
  let order = {
    productName: document.getElementById("pName").value,
    productPrice: document.getElementById("pPrice").value,
    qty: document.getElementById("qty").value,
    total: document.getElementById("total").value,
  }
  orders.push(order)
  tForm.reset();

  // 只给最新的这条订单生成行
  let row = document.createElement("tr")
  Object.values(order).forEach(text => {
    let cell = document.createElement("td")
    let texNode = document.createTextNode(text)
    cell.appendChild(texNode)
    row.appendChild(cell)
  })
  table.appendChild(row)
})

function addNumber() {
  var x = document.getElementById("pPrice").value;
  var y = document.getElementById("qty").value;
  var z = document.getElementById("amount").value;
  var disc = document.getElementById("disc").value
  var discTotal = y * x * disc / 100;
  document.getElementById("total").value = (y * x) - z - discTotal;
}

两种方案都可以解决重复渲染的问题，可根据你的实际使用场景选择。

内容的提问来源于stack exchange，提问作者Romanch haque