1

尝试制作一个简单的计算表格；line total, qty total, shipping * qty total, 然后是总计，在 jquery 中找到了一些代码来完成第一部分，但不是 100% 确定如何完成其​​余部分！

以下是我到目前为止所拥有的...

谢谢马特。

<HTML>
    <pre class="prettyprint">
        This is an example of working out total pricing,  original code taken from 
        V3: http://stackoverflow.com/questions/9900369/jquery-calculate-sum-of-fields-dynamic

        -Need to work out total QTY, then multiple total freight by total qty (ie. qty of 5, so 5 x $10 = $50 worth of freight)
    </pre>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <SCRIPT>
        $(function(){
            function doCalc() {
                var total = 0;
                $('tr').each(function() {
                    $(this).find('span.amount').html($('input:eq(0)', this).val() * $('select', this).val());
                });
                $('.amount').each(function() {
                    total += parseInt($(this).text(),10);
                });
                $('div.total_amount').html(total);

            }
            $('button').click(doCalc);
        });
    </script>
    <table class="table table-striped table-condensed table-bordered">
        <thead>
            <tr>
                <th width="20%">Item</th>
                <th width="20%">Unit Price</th>
                <th width="20%">Quantity</th>
                <th width="20%">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Item1</td>
                <td>$10<input type="hidden" value="10"></td>
                <td><select size="1" style="border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
                    <option value="0" selected>0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select></td>
                <td>$<span class="amount"></span> </td>
            </tr>
            <tr>
                <td>Item2</td>
                <td>$20<input type="hidden" class="really don't care" name="testing" value="20"></td>
                <td><select size="1" class="input-small" name="var_1_1" style="border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
                    <option value="0" selected>0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select></td>
                <td>$<span class="amount"></span> </td>
            </tr>
            <tr>
              <td colspan="3"><strong>Total  QTY</strong></td>
              <td></td>
              <td><strong><div class="total_qty"></div></strong></td>
          </tr>
          <tr>
              <td colspan="3"><strong>Total  Freight @$15 x QTY</strong></td>
              <td></td>
              <td><strong><div class="total_freight"></div></strong></td>
          </tr>
          <tr>
            <td colspan="3"><strong>Total  cost $</strong></td>
            <td></td>
            <td><strong><div class="total_amount"></div></strong></td>
        </tr>
    </tbody></table>
    <button>Go!</button>
</HTML>
4

2 回答 2

2

Check it out here, http://jsfiddle.net/muthkum/hDdtx/2/

I modified your JS code,

$(function(){
    function doCalc() {
        var total = 0;
        var qty = 0;
        $('tr').each(function() {
            $(this).find('span.amount').html($('input:eq(0)', this).val() * $('select', this).val());
        var sel_val = parseInt($('select', this).val(), 10);
        if(!sel_val) sel_val = 0;
        qty = qty + sel_val;
        });
        $('.amount').each(function() {
            total += parseInt($(this).text(),10);
        });
        $('.total_qty').text(qty);    //Total QTY calculation
        $('.total_freight').text(15*qty);   //Total Freight @$15 x QTY calculation
        $('div.total_amount').html(total);  //Total Cost

    }
    $('button').click(doCalc);
});
于 2012-11-14T05:33:31.643 回答
0

你可以试试这个例子。

$(function(){
    $('button').click(doCalc);
});​

function doCalc() {
    var total = 0;
    $('tbody tr').each(function() {
        var txt=$('input:eq(0)', this).val(),
        sel=$('select', this).val();
        if(typeof txt !='undefined')
        {
            $(this).find('span.amount').html(txt*sel);
            total += parseInt(txt*sel);
        }
    });
    $('div.total_amount').html(total);
}
于 2012-11-14T05:38:51.413 回答