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

Question

Lorsqu'un utilisateur entre dans la page, un tableau HTML contenant deux lignes sera 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	Produits	Montant	Prix
输入框

Une fois que l'utilisateur a saisi le code-barres dans la zone de saisie, j'ai besoin de :

1. Mettez à jour d'autres cellules avec les détails du produit (stockés dans une base de données MySQL) en fonction du code-barres inséré ;
Générez une autre ligne similaire à la ligne précédente.

Donc après la première saisie, le formulaire devrait ressembler à ceci :

Code-barresProduitsMontantPrix54573498759384Pantalon1099$

输入框

Attendez...

J'ai lu partout et j'en suis arrivé à la conclusion que j'ai probablement besoin d'AJAX, mais je ne l'ai jamais utilisé auparavant, donc toute aide est grandement appréciée, juste pour commencer, dans le langage le plus simple possible.

J'utilise uniquement PHP et Javascript. Je n'ai jamais utilisé JQuery.

Merci d'avance.

Je n’ai pas encore trouvé de moyen.

Answer 1

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