Hasilkan jadual baris demi baris selepas input pengguna

Question

Apabila pengguna memasuki halaman, jadual HTML yang mengandungi dua baris akan dijana. Baris pertama ialah tajuk jadual, baris kedua mempunyai kotak input dalam sel pertama, dan sel lain kosong.

Kod Bar	Produk	Jumlah	Harga
输入框

Selepas pengguna memasukkan kod bar dalam kotak input, saya perlukan:

1. Kemas kini sel lain dengan butiran produk (disimpan ke dalam pangkalan data MySQL) berdasarkan kod bar yang dimasukkan
2. Hasilkan baris lain yang serupa dengan yang sebelumnya.

Jadi selepas entri pertama, borang akan kelihatan seperti ini:

Kod Bar	Produk	Jumlah	Harga
54573498759384	Seluar	10	$99
输入框

Tunggu...

Saya telah membaca di mana-mana dan membuat kesimpulan bahawa saya mungkin memerlukan AJAX, tetapi saya tidak pernah menggunakannya sebelum ini, jadi sebarang bantuan amat dihargai, hanya untuk bermula, dalam bahasa yang paling mudah.

Saya hanya menggunakan PHP dan Javascript. Saya tidak pernah menggunakan JQuery.

Terima kasih terlebih dahulu.

Saya belum jumpa jalan lagi.

Answer 1

Hanya tambah panggilan ajax dalam fungsi onBarcodeChange untuk mendapatkan data dari backend

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