使用 PHP 和数组进行实时计算

Question

对于一个客户，我目前正在开发他们的新系统。在这个系统中，他们可以创建预订/发票并将其发送给他们的客户。

我的客户需要在第一页填写报价单中每个容器的价格。我的客户要求我在容器列下方创建一个新表格列，其中包含所有容器的总价格。我想实时进行，所以当我的客户填写价格时，总价格会发生变化。

我偶然发现的唯一问题是： 我目前有 PHP/MySQL 函数，可以从数据库中的某个引用中收集所有容器。通过 while 循环，我为每个容器创建了所需的 html 代码。我通过这样命名输入字段，将输入字段（填写价格的地方）设为数组：

<td>&euro; <input type="text" name="msg_container['.$i.'][ocean_freight]" value="'. $quote['ocean_freight'].'" style="width: 100px;" /></td>

$i 变量在每个循环中计数。它从 0 开始，并在没有剩余容器时结束。

为了让事情更详细一点，我创建了一个 jsfiddle 当前页面的样子：https://jsfiddle.net/cwfmqbqv/

现在我不是 javascript 方面的专家，所以我被困在这一点上。长话短说，我怎样才能实时计算数组中的所有值？

Answer 1

这类似于第一个答案，但更完整，并且添加会在 keyup 而不是 blur 上触发。它适用于所有列，而无需为每个列创建单独的函数。 Here's the fiddle.

Javascript

$(function(){
    $(".ocean-input, .bunker-input, .thc-input, .road-input").on("keyup", function()
    {
        var total = 0;

      $("." + $(this).attr('class')).each(function()
        {
            total += parseFloat($(this).val().replace('', 0).replace(',', '.'));
        });

            $("#" + $(this).data("total-id")).html(total.toString().replace('.', ','));

    });
});

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, sans-serif; color:#000; font-size:12px;">

        <thead>
            <tr>
                <th width="50">Amount</th>
                <th>Type</th>
                <th>Weight (p/u)</th>
                <th>Shipping owned</th>
                <th>Ocean Freight</th>
                <th>Bunker Surcharge</th>
                <th>THC</th>
                <th>Road transport</th>
            </tr>
        </thead>

        <tbody>
            <tr>
            <td>1</td>
            <td>Container Type 1</td>
            <td>1000</td>
            <td>No</td>
            <td>&euro; <input type="text" class="ocean-input" data-total-id="ocean-total" name="msg_container[0][ocean_freight]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="bunker-input" data-total-id="bunker-total" name="msg_container[0][bunker_surcharge]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="thc-input" data-total-id="thc-total" name="msg_container[0][thc]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="road-input" data-total-id="road-total" name="msg_container[0][road_transport]" value="" style="width: 100px;"></td>
        </tr><tr>
            <td>1</td>
            <td>Container Type 2</td>
            <td>2500</td>
            <td>No</td>
            <td>&euro; <input type="text" class="ocean-input" data-total-id="ocean-total" name="msg_container[1][ocean_freight]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="bunker-input" data-total-id="bunker-total" name="msg_container[1][bunker_surcharge]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="thc-input" data-total-id="thc-total" name="msg_container[1][thc]" value="" style="width: 100px;"></td>
            <td>&euro; <input type="text" class="road-input" data-total-id="road-total" name="msg_container[1][road_transport]" value="" style="width: 100px;"></td>
        </tr>       </tbody>

        <tfoot>
            <tr>
                <th width="50"></th>
                <th></th>
                <th></th>
                <th></th>
                <th>Total: &euro;<span id="ocean-total"></span></th>
                <th>Total: &euro;<span id="bunker-total"></span></th>
                <th>Total: &euro;<span id="thc-total"></span></th>
                <th>Total: &euro;<span id="road-total"></span></th>
            </tr>
        </tfoot>

    </table>

Answer 2

在您的 jsfiddle 的以下更新中，您想要的内容是用纯 js 编写的： JSFiddle

这里的主要概念是在输入上使用change 事件。此外，我没有更改输入的命名，但考虑了更好的约定。

在total 函数中，我们得到我们正在处理的列类型（使用自定义属性比仅使用输入名称更好。例如：column-type="thc"）并计算每个相关输入的总数。 在您的情况下，它使用正则表达式 (RegExp) 从输入名称中找到正确的列。请注意，~~ 只是 JavaScript 中文本到整数转换的简单技巧。

接下来，我们找到所有输入并使用addEventListener 为每个change 事件类型附加一个事件侦听器。在这个委托中，我们为total 函数和跨度ID 找到了与输入所代表的列相对应的适当输入，再次使用RegExp，但这次是隐式的。然后根据total返回值更改对应的span；

Answer 3

我对你的小提琴做了一个简单的补充。

这还不完整，因为我只有时间为海运做一个。

JSFiddle

$(document).ready(function() {
    $(".oceanIn").keyup(function() {
        var total = 0.0;
        $.each($(".oceanIn"), function(key, input) {
            if(input.value && !isNaN(input.value)) {
                total += parseFloat(input.value);
            }
        });
        $("#oceanTotal").html("Total: " + total);
     });
});

我还为您的一些元素添加了一些 class 和 id 以使其正常工作。

注意

对于这个，我使用了keyup，但您可以随意使用不同的事件，例如change 或blur，或者任何适合您需要的事件。

在寻找客户之前，您应该尝试学习 Javascript 的基础知识。

另外，我认为您对列和行感到困惑。