javascript - 使用jquery在表中自动计算

Question

我的要求:

我有一个表格，其中数量单元格可编辑，当更改数量时，它需要与其他父 td 值相乘。并对列值求和。
(即)如果我将数量更改为 2，则父行需要乘以 2 并且列将获得添加值

我完成了所有计算部分，唯一的事情是当我删除或更改数量时，计算值保持不变如何恢复为旧值

这是我的 fiddle
Fiddle link

$(document).ready(function(){
  $('.quantity').on('change, keyup',function(){
       var val=$(this).text();
     // To avoid auto inc while pressing arrow keys
         var preVal =$(this).data('prevval');
        <!--  console.log(preVal); -->
      if(preVal && preVal == val){
          return;
      }
      $(this).data('prevval',val);
     //To avoid auto inc while pressing arrow keys //
 if(val =='' ||  isNaN(val) || val < 1){
 return;
 }
      $(this).siblings().each(function(){
          var tbvalue=$(this).text();
          var result= parseInt(tbvalue)*parseInt(val);
          
          $(this).text(result);
      }) 
autoSum();
  });

autoSum();
});
function autoSum(){
      for (var i = 1; i < 8; i++) {
        var sum = 0;
        $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').each(function() {
          sum += parseInt($(this).text()) || 0;
        });
        // set total in last cell of the column
        $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().html(sum);
       // $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
      }
}

.total {
  background-color: #000;
  color: #fff;
  font-weight: bold;
}

 <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>10</td>
        <td>5</td>
        <td>4</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>8</td>
        <td type>2</td>
        <td>3</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td>20</td>
        <td>3</td>
        <td>5</td>
        <td class="quantity" type="number"  contenteditable>1</td>
      </tr>
        <tr class="total">
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
    </tbody>
  </table>
</div>

Answer 1

在每一行中，td 存储要相乘的数字，将原始数字保留在 td 中的 data-val 属性中，并将您的内容可编辑值与其相乘。将相乘后的值显示为 td 文本。这里的一个变化是，当删除contenteditable单元格的值时，行计算时将其视为1，但列乘法时不考虑它。

HTML part
<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 data-val="10">10</td>
        <td data-val="5">5</td>
        <td data-val="4">4</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td data-val="8">8</td>
        <td data-val="2">2</td>
        <td data-val="3">3</td>
        <td class="quantity" type="number" contenteditable>1</td>
      </tr>
      <tr>
        <td data-val="20">20</td>
        <td data-val="3">3</td>
        <td data-val="5">5</td>
        <td class="quantity" type="number"  contenteditable>1</td>
      </tr>
        <tr class="total">
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
    </tbody>
  </table>
</div>

JS部分

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

      $(this).data('prevval',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:nth-child(' + i + ')');
        for(var j=0; j<tdBoxes.length-1;j++)
        {
          var value = $(tdBoxes[j]).text();
          //alert(value);
          sum += (value == undefined || value == "")? 0 : parseInt(value);
        }
        // set total in last cell of the column
        $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().html(sum);
       // $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
      }
}