使用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代碼中完成此操作：

<?php

if ($result->num_rows > 0) {
    $grandTotal = 0;
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];

      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>";
    }

    echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
    echo "0 results";
}
$conn->close();

?>

另外，這是一種輸出HTML的更簡潔的方法：

<?php

if ($result->num_rows > 0) {
    $grandTotal = 0;
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];

      ?>

      <tr>
          <td><?= htmlentities($row['id']); ?></td>
          <td><?= htmlentities($row['Article']); ?></td>
          <td><?= htmlentities($row['Prix']); ?></td>
          <td><?= htmlentities($row['PrixRetour']); ?></td>
          <td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
          <td><?= htmlentities($row['Projet']); ?></td>";
          <td id="quantity<?= $row['id']; ?>"><input type="number" name="quantity"></td>
      </tr>

      <?php
    }

    echo "Grand Total: {$grandTotal}"; // you might want to end your table before this. I'll leave formatting up to you.
} else {
    echo "0 results";
}
$conn->close();

?>

如果要使用表本身中的數量字段，則可以執行以下操作。 這是一個非常快速的解決方案。 您可能想要對其進行優化。 但這至少是可以使用的。

<?php

if ($result->num_rows > 0) {

    echo "<table id='items'>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
      $grandTotal += $row['Prix'] * $row['QuantiteeMaximale'];

      ?>

      <tr>
          <td><?= htmlentities($row['id']); ?></td>
          <td><?= htmlentities($row['Article']); ?></td>
          <td><?= htmlentities($row['Prix']); ?></td>
          <td><?= htmlentities($row['PrixRetour']); ?></td>
          <td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
          <td><?= htmlentities($row['Projet']); ?></td>";
          <td><input data-price='<?= floatval($row['Prix']); ?>' data-max-quantity='<?= intval($row['QuantiteeMaximale']); ?>' type="number" name="quantity"></td>
      </tr>

      <?php
    }

    ?>

    </table>

    <p>Grand Total: $<span id='grandTotal'></span></p>

    <script>
        (() => {
            const updateGrandTotal = (grandTotalEl, inputEls) => {
                grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {
                    const maxQuantity = parseInt(inputEl.dataset.maxQuantity)

                    if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity
                    if(parseInt(inputEl.value) < 0) inputEl.value = 0

                    const price = parseFloat(inputEl.dataset.price)
                    const quantity = parseInt(inputEl.value)

                    if(isNaN(quantity)) return total

                    return total + (price * quantity)
                }, 0)
            }

            const tableEl = document.getElementById('items')
            const grandTotalEl = document.getElementById('grandTotal')
            const quantityInputEls = tableEl.querySelectorAll('input[name=quantity]')

            quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))
        })()
    </script>

    <?php
} else {
    echo "0 results";
}
$conn->close();

?>