Foreach 循环中的价格与数量计算

Question

我想通过从 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>

我想我要么需要能够增加每个的数量和价格 ID。 但我在 php 中看不到如何做到这一点。

对于 javascript 中的计算，我需要能够获得这些 id 增量来进行总计。 但我不知道该怎么做。

所以如果你能给我指出正确的方向，我已经提前感谢你了。

Answer 1

为了让您的 function Calcul_total知道它应该在哪个表格行上运行，您需要一种方法让它在被调用时知道上下文。

最适合您的场景的最快方法是调用 function 传递参数this 。

这样 function 稍后将只关注该行，而不是在搜索元素.qty 、 .price和.total时查询整个文档。 如您所见，我更改了您的策略以对每行上重复的元素使用相同的 id，因此我更喜欢使用 class 方法，因为 id 预计在整个文档中是唯一的。

我选择了您的部分代码来展示这个概念（仅对黄金和白银使用两行代码）：

 function Calcul_total(target) { const parent = target.closest('tr'); var x = parent.querySelector('.qty').value; var y = parent.querySelector('.price').textContent; parent.querySelector('.total').innerText = x * y; }

 <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> <tr> <td> <input type="text" class="qty" oninput="Calcul_total(this)"> </td> <td class="center">Gold</td> <td>13</td> <td class="price">57.22</td> <td class="total"></td> </tr> <tr> <td> <input type="text" class="qty" oninput="Calcul_total(this)"> </td> <td class="center">Silver</td> <td>43</td> <td class="price">35.53</td> <td class="total"></td> </tr> </tbody> </table> </div> </form>

Foreach 循环中的价格与数量计算

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-12-08 14:24:28

Foreach 循环中的价格与数量计算

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-12-08 14:24:28

解决方案1
2 已采纳 2022-12-08 14:24:28