jquery html에서 총 비용을 계산하는 데 문제가 있습니다

계산이 간단한 양식을 만들려고합니다. 총계, 총계, 총계, 총액, 총계, 총계가 jquery의 첫 번째 부분을 수행하는 코드를 찾았지만 나머지는 어떻게 수행해야하는지 100 % 확신하지 못했습니다! 다음은jquery html에서 총 비용을 계산하는 데 문제가 있습니다

... 나는 지금까지 무엇을

들으 매트입니다. 나는 당신의 JS 코드를 수정 http://jsfiddle.net/muthkum/hDdtx/2/

<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>

출처

2012-11-14 Matt.

여기를 확인,

$(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-14 05:33:31

고정 된 마크 업, 논리 \의 pesentation의 separetion 및 자동 업데이트 http://jsfiddle.net/FJWWq/4/ 당신의 – JAre

최고 작품 모두 들으 힙 스크립트 버전. –

이 Example을 시도 할 수 있습니다.

$(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-14 05:38:51

jquery html에서 총 비용을 계산하는 데 문제가 있습니다

답변

관련 문제