如何在wordpress中的联系表格7中将数字字段的总和制作为单个字段

Question

以下是联系表格7中的表格代码，

<table>
<tr>
<th>RX #</th>
<th>Amount</th>
</tr>
<tr>
<td>[number RX1 placeholder "RX1"]</td>
<td>[number RX1Amount placeholder "RX1 Amount"]</td>
</tr>
<tr>
<td>[number RX2 placeholder "RX2"]</td>
<td>[number RX2Amount placeholder "RX2 Amount"]</td>
</tr>
<tr>
<td>[number RX3 placeholder "RX3"]</td>
<td>[number RX3Amount placeholder "RX3 Amount"]</td>
</tr>
<tr>
<td>[number RX4 placeholder "RX4"]</td>
<td>[number RX4Amount placeholder "RX4 Amount"]</td>
</tr>
<tr>
<td>[number RX5 placeholder "RX5"]</td>
<td>[number RX5Amount placeholder "RX5 Amount"]</td>
</tr>
<tr>
<td>Total Amount</td>
<td>[number TotalAmount]</td>
</tr>
</table>

我想以这样的方式对金额列求和，当我在任何字段中输入数字/金额时，它应该在最后一个总行中更新，如果我在多行中输入数字/金额，则应更新所有行的总和在最后一排。

为了清楚地理解查看下图。

谁能帮我吗？

Answer 1

我没有测试这段代码，但如果它至少没有运行，它将帮助您找出解决方案。我在金额字段中添加了一个类，在总数中添加了一个 id，在输入字段中添加了一个函数，每次字段的值更改时都会触发：

<table>
<tr>
<th>RX #</th>
<th>Amount</th>
</tr>
<tr>
<td>[number RX1 placeholder "RX1"]</td>
<td>[number RX1Amount class:amount-field placeholder "RX1 Amount"]</td>
</tr>
<tr>
<td>[number RX2 placeholder "RX2"]</td>
<td>[number RX2Amount class:amount-field placeholder "RX2 Amount"]</td>
</tr>
<tr>
<td>[number RX3 placeholder "RX3"]</td>
<td>[number RX3Amount class:amount-field placeholder "RX3 Amount"]</td>
</tr>
<tr>
<td>[number RX4 placeholder "RX4"]</td>
<td>[number RX4Amount class:amount-field placeholder "RX4 Amount"]</td>
</tr>
<tr>
<td>[number RX5 placeholder "RX5"]</td>
<td>[number RX5Amount class:amount-field placeholder "RX5 Amount"]</td>
</tr>
<tr>
<td>Total Amount</td>
<td>[number TotalAmount id:total-amount]</td>
</tr>
</table>

Js代码：

jQuery(document).ready(function($) {
    var $amount_fields = $('.amount-field'),
        $total_amount = $('#total-amount');

    $amount_fields.on('input', function(e) {
        var final_value = 0;
        $amount_fields.each(function() {
            var value = $(this).val();
            if (!isNaN(value) && value > 0) final_value += parseInt(value);
        });
        $total_amount.val(final_value);
    })
});

希望能帮助到你！