使用javascript从html表中提取数据

Question

我有一个 php 网站，它使用从数据库中获取的数据制作表格。在表格中，我有一个输入，以便用户可以选择他们想要购买的每件商品的数量。我通过连接 id 成功地使每个输入的 id 不同。

这是制作表格的php：

<?php

if ($result->num_rows > 0) {

    // output data of each row

    while($row = $result->fetch_assoc()) {

      echo "<tr>";

      echo "<td>" . $row['id'] . "</td>";

      echo "<td>" . $row['Article'] . "</td>";

      echo "<td>" . $row['Prix'] . "</td>";

      echo "<td>" . $row['PrixRetour'] . "</td>";

      echo "<td>" . $row['QuantiteeMaximale'] . "</td>";

      echo "<td>" . $row['Projet'] . "</td>";

      echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";

      echo "</tr>";

    }

} else {

    echo "0 results";

}

$conn->close();

?>

我需要在表的末尾写下总金额，但我不知道如何在 javascript 中进行 for 循环，以便输入字段中的数字乘以价格。是否有一个简单的代码部分可以用来计算总价？

Answer 1

您不需要在 Javascript 中执行此操作。你可以在你的 PHP 代码中做到这一点：<?phpif ($result->num_rows > 0) {&nbsp; &nbsp; $grandTotal = 0;&nbsp; &nbsp; // output data of each row&nbsp; &nbsp; while($row = $result->fetch_assoc()) {&nbsp; &nbsp; &nbsp; $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];&nbsp; &nbsp; &nbsp; echo "<tr>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['id'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['Article'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['Prix'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['PrixRetour'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['QuantiteeMaximale'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td>" . $row['Projet'] . "</td>";&nbsp; &nbsp; &nbsp; echo "<td id=\"quantity" . $row['id'] . "\"><input type=\"number\" name=\"quantity\" id=\"quantity\"></td>";&nbsp; &nbsp; &nbsp; echo "</tr>";&nbsp; &nbsp; }&nbsp; &nbsp; echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.} else {&nbsp; &nbsp; echo "0 results";}$conn->close();?>此外，这里有一种更简洁的方式来输出 HTML：<?phpif ($result->num_rows > 0) {&nbsp; &nbsp; $grandTotal = 0;&nbsp; &nbsp; // output data of each row&nbsp; &nbsp; while($row = $result->fetch_assoc()) {&nbsp; &nbsp; &nbsp; $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];&nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['id']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Article']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Prix']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['PrixRetour']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['QuantiteeMaximale']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Projet']); ?></td>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="quantity<?= $row['id']; ?>"><input type="number" name="quantity"></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; }&nbsp; &nbsp; echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.} else {&nbsp; &nbsp; echo "0 results";}$conn->close();?>如果您想使用表格本身中的数量字段，您可以这样做。这是一个非常快速的解决方案。你可能想要改进它。但它至少是可以使用的。<?phpif ($result->num_rows > 0) {&nbsp; &nbsp; echo "<table id='items'>";&nbsp; &nbsp; // output data of each row&nbsp; &nbsp; while($row = $result->fetch_assoc()) {&nbsp; &nbsp; &nbsp; $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];&nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['id']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Article']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Prix']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['PrixRetour']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['QuantiteeMaximale']); ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><?= htmlentities($row['Projet']); ?></td>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input data-price='<?= floatval($row['Prix']); ?>' data-max-quantity='<?= intval($row['QuantiteeMaximale']); ?>' type="number" name="quantity"></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; }&nbsp; &nbsp; ?>&nbsp; &nbsp; </table>&nbsp; &nbsp; <p>Grand Total: $<span id='grandTotal'></span></p>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; (() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const updateGrandTotal = (grandTotalEl, inputEls) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const maxQuantity = parseInt(inputEl.dataset.maxQuantity)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(parseInt(inputEl.value) < 0) inputEl.value = 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const price = parseFloat(inputEl.dataset.price)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const quantity = parseInt(inputEl.value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isNaN(quantity)) return total&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return total + (price * quantity)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const tableEl = document.getElementById('items')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const grandTotalEl = document.getElementById('grandTotal')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const quantityInputEls = tableEl.querySelectorAll('input[name=quantity]')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))&nbsp; &nbsp; &nbsp; &nbsp; })()&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php} else {&nbsp; &nbsp; echo "0 results";}$conn->close();?>