Question

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

在1页上，我的客户需要填写qoutation中每个容器的价格。我的客户要我在容器列下面创建一个新的表格列，其中包含所有容器的总价格。我想这么做，所以当我的客户填写价格总价格变化时。

我偶然发现的唯一问题是：我目前有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

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

它没有完整，因为我只有时间为海运制作一个。

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的基础知识。

另外，我认为您在列和行之间感到困惑。

Answer 2

这与第一个答案类似，但更完整，并且加密会在keyup而不是on 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 3

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

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

在total函数中，我们得到一种我们正在处理的列（使用自定义属性比仅使用输入名称更好。例如：column-type="thc"）并计算每个列的总数相关输入。它使用正则表达式（RegExp）来查找输入名称中的右列。请注意~~只是JavaScript中文本到整数转换的简单黑客。

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

使用PHP＆amp; amp;进行实时计算排列

3 个答案:

注意