我想通过从SQL数据库插入我的产品来计算每行的总价格。
如果我的数据库中只有一个产品,我可以用我做的代码计算总数。问题是我不能有几个同名的id属性,我知道这一点。
怎么可能在javascript中计算总数,并在我的HTML代码中增加ID数量和价格?
这是我的代码:
<?php
include 'main.php';
check_loggedin($pdo);
$minerals = $pdo->query('SELECT * FROM products WHERE category = "mineral"');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body class="loggedin">
<?php include 'navigation.php' ;?>
<main>
<div class="content">
<h2>Caisse</h2>
<div class="content-block">
<form action="" method="post" class="">
<div class="table">
<h3>Minérales</h3>
<table>
<colgroup>
<col width="5%">
<col width="35%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<thead>
<tr>
<td>QTY</td>
<td class="center">Product</td>
<td>Unit</td>
<td>Price</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<?php if (!$minerals): ?>
<tr>
<td colspan="5" style="text-align:center">There are no minerals</td>
</tr>
<?php endif; ?>
<?php foreach ($minerals as $mineral): ?>
<tr>
<td><input type="text" id="qty" name="qty_mineral" oninput="Calcul_total()"></td>
<td class="center"><?=$mineral['name']?></td>
<td><?=$mineral['unit']?></td>
<td id="price"><?=$mineral['price']?></td>
<td id="total"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</form>
</div>
</div>
</main>
</body>
</html>
<script>
function Calcul_total() {
var x = document.getElementById('qty').value;
var y = document.getElementById('price').textContent;
document.getElementById('total').innerHTML = x * y;
}
</script>
我想我要么需要能够增加每个的数量和价格标识,但我不知道如何在PHP中做到这一点。
对于javascript中的计算,我需要能够得到这些id增量来计算总数,但是我不知道如何去做。
所以如果你能给我指明正确的方向,我已经提前感谢你了。
1条答案
按热度按时间p1tboqfb1#
为了让函数
Calcul_total
知道它应该在哪个表行上操作,你需要一种方法让它在被调用时知道上下文。最快的方法是调用传递参数
this
的函数。这样函数在搜索元素
.qty
,.price
和.total
时就只关注该行而不是查询整个文档。正如您所看到的,我改变了策略,对每行重复的元素使用相同的id,所以我更喜欢使用类方法,因为id在整个文档中应该是唯一的。我选择了部分代码来展示这个概念(只对金色和银使用两行代码):
第一个