Generieren Sie die Tabelle Zeile für Zeile nach Benutzereingaben

Question

Wenn ein Benutzer die Seite betritt, wird eine HTML-Tabelle mit zwei Zeilen generiert. Die erste Zeile ist der Tabellentitel, die zweite Zeile enthält ein Eingabefeld in der ersten Zelle und die anderen Zellen sind leer.

Barcode	Produkte	Betrag	Preis
输入框

Nachdem der Benutzer den Barcode in das Eingabefeld eingegeben hat, benötige ich:

1. Aktualisieren Sie andere Zellen mit Produktdetails (gespeichert in einer MySQL-Datenbank) basierend auf dem eingefügten Barcode
2. Erzeugen Sie eine weitere Zeile ähnlich der vorherigen.

Nach der ersten Eingabe sollte das Formular also so aussehen:

Barcode	Produkte	Betrag	Preis
54573498759384	Hosen	10	99 $
输入框

Warte...

Ich habe überall gelesen und bin zu dem Schluss gekommen, dass ich wahrscheinlich AJAX brauche, aber ich habe es noch nie zuvor verwendet, daher bin ich für jede Hilfe sehr dankbar, nur für den Anfang, in der einfachsten Sprache, die möglich ist.

Ich verwende nur PHP und Javascript. Ich habe JQuery noch nie verwendet.

Vielen Dank im Voraus.

Ich habe noch keinen Weg gefunden.

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