Générer un tableau ligne par ligne après la saisie de l'utilisateur

Question

Lorsqu'un utilisateur accède à la page, un tableau HTML contenant deux lignes est généré. La première ligne est le titre du tableau, la deuxième ligne comporte une zone de saisie dans la première cellule et les autres cellules sont vides. Code à barres Montant du produit Prix Zone de saisie Une fois que l'utilisateur a saisi le code à barres dans la zone de saisie, je dois : mettre à jour d'autres cellules avec les détails du produit (stockés dans la base de données MySQL) en fonction du code à barres inséré, générer une autre ligne similaire à la ligne précédente ; Ainsi, après la première saisie, le formulaire devrait ressembler à ceci : Code à barres Produit Montant Prix 54573498759384 Pantalon 1099 $ Zone de saisie et ainsi de suite...

P粉990568283 · Answer

Ajoutez simplement un appel ajax dans la fonction onBarcodeChange pour obtenir les données du 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



`输入框`