使用javascript从html表格中拉取数据
使用javascript从html表格中拉取数据
提问于 2019-05-22 09:06:27
我有一个php网站，使一个表使用从数据库中提取的数据。在表格中，我有一个输入，以便用户可以选择他们想要购买的每种商品的数量。我已经成功地通过连接I使每个输入的I不同。
下面是生成该表的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循环，以便输入字段中的数字乘以价格。有没有简单的代码部分可以用来计算总价格？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-22 09:10:44
您不需要在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();
?>如果您想在表中使用quantity字段，可以这样做。这是一个非常快速的解决方案。您可能需要对其进行改进。但它至少是一些可以使用的东西。
<?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();
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56248052
复制相关文章
相似问题