用户输入后逐行生成表格

Question

当用户进入页面时，会生成一个包含两行的 HTML 表格。第一行是表格标题，第二行的第一个单元格中有一个输入框，其他单元格为空。

条形码	产品	金额	价格
输入框

用户在输入框中输入条形码后，我需要：

1. 根据插入的条形码使用产品详细信息（存储到 MySQL 数据库中）更新其他单元格；
2. 生成与前一行类似的另一行。

因此，在第一次输入后，表格应如下所示：

条形码	产品	金额	价格
54573498759384	裤子	10	99 美元
输入框

等等...

我到处阅读，得出的结论是我可能需要 AJAX，但我以前从未使用过它，因此非常感谢您的帮助，只是为了开始，用尽可能简单的语言。

我只使用 PHP 和 Javascript。我从未使用过 JQuery。

提前致谢。

目前我还没有找到办法。

Answer 1

只需在 onBarcodeChange 函数中添加 ajax 调用即可从后端获取数据

function onBarcodeChange(id) {
  // ... cal your backend/SQL to get data
  const mockData = {
    product: `Product ${id}`,
    amount: getRandomInt(100),
    price: getRandomInt(10)
  }

  const {
    product,
    amount,
    price
  } = mockData
  
  document.getElementById(`product${id}`).innerText = product
  document.getElementById(`amount${id}`).innerText = amount
  document.getElementById(`price${id}`).innerText = price

  addTableRow(id + 1)
}

function addTableRow(id) {

  const barcodeInput = document.createElement('input')
  barcodeInput.placeholder = "Enter barcode"
  barcodeInput.onchange = () => onBarcodeChange(id)

  // create 4 cells
  const cellNames = ['barcode', 'product', 'amount', 'price']
  const cells = cellNames.map(name => {
    const cell = document.createElement('td')
    cell.id = `${name}${id}`
    return cell
  })

  // add input to the 1st cell
  cells[0].appendChild(barcodeInput)

  const row = document.createElement('tr')
  cells.forEach(cell => row.appendChild(cell))

  const table = document.getElementById('products')
  table.appendChild(row)

  barcodeInput.focus()
}

function getRandomInt(max) {
  const min = 1
  return Math.floor(Math.random() * (max - min) + min);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

barcode	product	amount	price