Question

我进行过搜索，但没有发现任何我想要做的事情。

我有一个动态表单，每个项目有2个输入框，1表示值，另一个表示数量。 E.g。

<table class="table table-striped table-condensed table-bordered">
<thead>
    <tr>
        <th>Item</th>
        <th width="20%">Value</th>
        <th width="20%">Quantity</th>
        <th class="actions">Total</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Item</td>
        <td><input type="text" class="input-small" name="var_1" value="0"></td>
        <td><input type="text" class="input-small" name="var_1_1" value="0"></td>
        <td>$<span class="amount"></span> </td>
    </tr>
    <tr>
        <td>Item</td>
        <td><input type="text" class="input-small" name="var_2" value="0"></td>
        <td><input type="text" class="input-small" name="var_2_2" value="0"></td>
        <td>$<span class="amount"></span> </td>
    </tr>
    <tr>
        <td colspan="3"><strong>Total event cost (viability)</strong></td>
        <td><strong>$<div class="total_amount">total</div></strong></td>
    </tr>
</tbody>

所以我需要计算val_1 X val_1_1 =总数，然后在结尾添加总数（对于每个项目）。

我希望我能找到适用于无限项目的东西。

Answer 1

这是怎么回事： jsFiddle example 。

jQuery的：

function doCalc() {
    var total = 0;
    $('tr').each(function() {
        $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
    });
    $('.amount').each(function() {
        total += parseInt($(this).text(),10);
    });
    $('div.total_amount').html(total);
}
$('button').click(doCalc);

Answer 2

您最大的问题是，您没有简单的方法来确保您确定哪些字段是值，哪些字段是数量。您编写它的方式，任何带有单个下划线的字段名称都可以是值，但是名为“some_value_1”的字段呢？

使用表定位是一个很好的解决方案，只要没有人为您的表添加更多列。我认为您应该使用一个类来指示哪些字段是值，哪些是数量。

无论如何，我的解决方案，为了清晰起见略显冗长：

    <form>
        <label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label> 
        <label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/>

        <label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label> 
        <label>qty: <input type="text" name="cost_2_qty" size="2"/></label><br/>

        <label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label> 
        <label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/>

        <strong id="summation"></strong><br/>
    </form>
    <script type="text/javascript">

        function doTotal() {
            var total = 0.0;

            $(".summable").each(function (idx, element) {
                $this = $(this);

                var cost = parseFloat($this.val());
                var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty]
                var qty = parseFloat($(qty_selector).val());
                if (cost && qty)
                    total += cost * qty ;
            });

            $("#summation").html(total.toFixed(2));
        }

        $(document).ready(function() {
            $("input[type=text]").blur(function (e) {
                doTotal();
            })
        });         
    </script>

Answer 3

我认为这会做你想要的。

function calcCost() {
  var total = 0;

  $('table tr').each( function() {
    if ( $(this).find('td').length && $(this).find('td input').length ) {
      var quant = parseInt($(this).find('td input').eq(0).val()),
      price = parseInt($(this).find('td input').eq(1).val());
      $(this).find('.amount').html(quant * price);
      total += quant * price;
    }
  });

  $('.total_amount').html(total);
}

calcCost();

$('input').on('keyup', function() {
  calcCost();
});

Jquery，计算字段总和（动态）

3 个答案: