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

Question

當使用者進入頁面時，會產生一個包含兩行的HTML表格。第一行是表格標題，第二行的第一個儲存格中有一個輸入框，其他儲存格為空。條碼產品金額價格輸入框使用者在輸入框中輸入條碼後，我需要：根據插入的條碼使用產品詳細資料（儲存到MySQL資料庫中）更新其他儲存格；產生與前一行類似的另一行。因此，在第一次輸入後，表格應如下所示：條碼產品金額價格54573498759384褲子1099美元輸入框等等...

P粉990568283 · Answer

只需在 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

條碼	產品	金額	價格
54573498759384	褲子	10	99 美元
`輸入框`