自動錶格計算

Question

我有一個數量單元格的表格，當它需要與其他父類型的td值相乘時，將它與列值相加。 （IE）如果我改變數量爲2，則父行需要乘以2分&列獲得價值得到補充

我做好了所有的計算部分，而不輸入TD現在我追加的輸入和計算得到了影響我調試和檢查的話，我不知道會是什麼問題

這裏我的小提琴：
https://jsfiddle.net/hahkarthick/57zpk59k/3/

$(document).ready(function(){ 
 
    $('.quantity').on('change, keyup',function(){ 
 
     var val=$(this).val(); 
 
\t \t \t console.log(val) 
 
    // To avoid auto inc while pressing arrow keys 
 
     var preVal =$(this).data('val'); 
 

 
     $(this).data('val',val); 
 
    //To avoid auto inc while pressing arrow keys // 
 
if(val =='' || isNaN(val) || val < 1 || val == undefined){ 
 
    val = 1; 
 
} 
 

 
     $(this).siblings().each(function(){ 
 
      var tbvalue=$(this).data("val"); 
 
      var result= parseInt(tbvalue)*parseInt(val); 
 
      $(this).text(result); 
 
     }); 
 
autoSum(); 
 
    }); 
 

 
autoSum(); 
 
}); 
 
function autoSum(){ 
 
     for (var i = 1; i <= 4; i++) { 
 
     var sum = 0; 
 
     var tdBoxes = $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')'); 
 
     for(var j=0; j<tdBoxes.length-1;j++) 
 
     { 
 
      var value = $(tdBoxes[j]).val();   
 
      sum += (value == undefined || value == "")? 0 : parseInt(value); 
 
     } 
 
     // set total in last cell of the column 
 
     $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')').last().html(sum); 
 
     // $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total'); 
 
     } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <h2>Table calculation</h2> 
 
    <p>Calculaton</p>    
 
    <table class="auto_sum table table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th>value1</th> 
 
     <th>value2</th> 
 
     <th>value3</th> 
 
     <th>Quantity</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td><input type="number" data-val="" value="20" name=""></td> 
 
     <td><input type="number" data-val="" value="10" name=""></td> 
 
     <td><input type="number" data-val="" value="10" name=""></td> 
 
     <td><input class="quantity" type="number" name=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type="number" data-val="" value="5" name=""></td> 
 
     <td><input type="number" data-val="" value="6" name=""></td> 
 
     <td><input type="number" data-val="" value="12" name=""></td> 
 
     <td><input class="quantity" type="number" name=""></td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type="number" data-val="" value="45" name=""></td> 
 
     <td><input type="number" data-val="" value="23" name=""></td> 
 
     <td><input type="number" data-val="" value="22" name=""></td> 
 
     <td><input class="quantity" type="number" name=""></td> 
 
     </tr> 
 
     <tr class="total"> 
 
      <td> </td> 
 
      <td> </td> 
 
      <td> </td> 
 
      <td> </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

希望這有助於...

<div class="container"> 
     <h2>Table calculation</h2> 
     <p>Calculaton</p>    
     <table class="auto_sum table table-hover" id="sum_table"> 
     <thead> 
      <tr class="title"> 
      <th>value1</th> 
      <th>value2</th> 
      <th>value3</th> 
      <th>Quantity</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td><input type="text" data-val="" value="20[2]" name=""></td> 
      <td><input type="number" data-val="" value="10" name=""></td> 
      <td><input type="number" data-val="" value="10" name=""></td> 
      <td><input class="quantity" type="number" name=""></td> 
      </tr> 
      <tr> 
      <td><input type="number" data-val="" value="5" name=""></td> 
      <td><input type="number" data-val="" value="6" name=""></td> 
      <td><input type="number" data-val="" value="12" name=""></td> 
      <td><input class="quantity" type="number" name=""></td> 
      </tr> 
      <tr> 
      <td><input type="number" data-val="" value="45" name=""></td> 
      <td><input type="number" data-val="" value="23" name=""></td> 
      <td><input type="number" data-val="" value="22" name=""></td> 
      <td><input class="quantity" type="number" name=""></td> 
      </tr> 
      <tr class="totalColumn"> 
       <td class="totalCol">Total:</td> 
       <td class="totalCol">Total:</td> 
       <td class="totalCol">Total:</td> 
       <td></td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    <script> 
    $(document).ready(function(){ 
     $('.quantity').on('change',function(){ 
      var val=$(this).val(); 
      console.log(val) 
     // To avoid auto inc while pressing arrow keys 
      var preVal =$(this).data('val'); 

      $(this).data('val',val); 
     //To avoid auto inc while pressing arrow keys // 
    if(val =='' || isNaN(val) || val < 1 || val == undefined){ 
     val = 1; 
    } 


    $(this).parent().siblings().each(function(){ 
     var oldval = $(this).find('input').val(); 

     var arr = oldval.split("["); 
     console.log(arr); 
     //var newval = val * oldval; 
     var newval = (val * parseFloat(arr[0])).toFixed(2); 

     console.log(newval); 
     if(arr.length > 1) { 
      newval = newval + "[" + arr[1]; 
     } 

     $(this).find('input').val(newval); 
    }); 
    autoSum(); 
     }); 

    autoSum(); 
    }); 

    function autoSum(){ 

     var $dataRows=$("#sum_table tr:not('.total, .title')"); 
     var totals=[0,0,0]; 
     $dataRows.each(function() { 
      $(this).find('input').each(function(i){   
       totals[i]+=parseFloat($(this).val()); 
      }); 
     }); 
     $("#sum_table td.totalCol").each(function(i){ 
      $(this).html("total:"+totals[i]); 
     }); 

    } 

    </script> 

Answer 2

我已經更新了fiddle。

我已經做以下變化： -

1. $('.quantity').on('change, keyup',function(){變更爲$('.quantity').on('keyup',function(){
2. $(this).siblings().each(function(){改爲$(this).parent().siblings().each(function(){
3. var tbvalue=$(this).data("val");改爲var tbvalue=$(this).find("input[type=number]").val();

希望它能幫助。