使用者輸入後逐行產生表格

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