jQuery自动计算错误

Question

。
Iam尝试做计算列1 &第2列和和[]内的值应该考虑。
到目前为止我能够计算特定的列，同时使用分割函数IAM获取错误。

例如：在用[]其计算正确，如果我不输入[]忽略了最低做计算与第一值具有细胞IAM显示错误

这是我的小提琴链路

https://jsfiddle.net/hahkarthick/0y0d4vge/2/

$(document).ready(function(){ 
 
     $('.quantity').on('change, keyup',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('.calc').data("val"); 
 
     alert(oldval); 
 
     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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""></td> 
 
      <td><input class="calc" data-val="[10]" 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 class="calc" type="number" data-val="" value="5" name=""></td> 
 
      <td><input class="calc" 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 class="calc" type="number" data-val="" value="45" name=""></td> 
 
      <td><input class="calc" 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>

感谢台湾研CE

Answer 1

见琴：https://jsfiddle.net/maxbilbow/0y0d4vge/7/

如果数据-VAL == “”，这样可以返回undefined。我已经改变了这一行：

var oldval = $(this).find('.calc').data("val") || "0"; 

而且，为了保险起见，投OLDVAL为String使得分割功能工作。

var arr = String(oldval).split("["); 

我还指定了兄弟姐妹一类：

$(this).parent().siblings('.calc-cell') 

$(document).ready(function() { 
 
    $('.quantity').on('change, keyup', 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('.calc-cell').each(function() { 
 
     var $calc = $(this).find('.calc'); 
 
     var oldval = $calc.data("val") || $calc.val() || "0"; 
 
     var arr = String(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 data-val="20[2]" class="calc" type="text" data-val="" value="20[2]" name=""> 
 
     </td> 
 
     <td> 
 
      <input class="calc" data-val="[10]" type="number" data-val="" value="10" name=""> 
 
     </td> 
 
     <td> 
 
      <input type="number" data-val="10" value="10" name=""> 
 
     </td> 
 
     <td> 
 
      <input class="quantity" type="number" name=""> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="calc-cell"> 
 
      <input class="calc" type="number" data-val="5" value="5" name=""> 
 
     </td> 
 
     <td class="calc-cell"> 
 
      <input class="calc" type="number" data-val="6" 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 class="calc" type="number" data-val="45" value="45" name=""> 
 
     </td> 
 
     <td> 
 
      <input class="calc" type="number" data-val="23" 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>