Question

。
Iam尝试做计算第1栏和第1栏列2和[]内的值应考虑到目前为止，我能够计算特定的列，同时使用拆分功能，我得到错误。

例如：在第一个单元格中，如果我在没有[]的情况下输入，则正确计算其值，并且计算并显示错误

这是我的小提琴链接

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

＆＃13;

 $(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]);
        });

    }

＆＃13;

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

＆＃13;

＆＃13; 在此先感谢

Answer 1

请参阅小提琴：https://jsfiddle.net/maxbilbow/0y0d4vge/7/

如果data-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>

在jQuery错误中自动计算

1 个答案: