文本框的所有相乘值的总和

时间：2017-11-14 18:09:45

标签： javascript jquery

我想在所有答案值的乘法和之后乘以文本框值。例如：

SUM (NSP * Current Sales)

这个程序运行正常，但是当我更改任何值时，它会添加更改而不是替换值。它应该替换数组的值。

如果可能的话，请尽量减少代码逻辑。感谢。

$(document).ready(function() {
  var val1;
  var val2;
  var multi;
  one();
  second();
});

function one() {
  $(document).on("change", ".qty1", function() {
    var sumqty1 = 0;
    sumqty1 += $(this).val();
    val1 = sumqty1;
  });
}

function second() {
  $(document).on("change", ".qty2", function() {
    var sumqty1 = 0;
    var sumqty2 = 0;
    sumqty1 += $(this).closest('tr').find('.qty1').val();
    sumqty2 += $(this).val();
    val1 = sumqty1;
    val2 = sumqty2;
    mul(val1, val2);
  });
}
var arr = [];

function mul(a, b) {
  var hh;
  multi = a * b;
  arr.push(multi);
  var totalsum = 0;
  for (var i in arr) {
    var value = arr[i];
    totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
    $("#totalvalue").text(totalsum);
  }
  console.log(arr);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th><span id='totalvalue'></span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>

      <td>Satou</td>
      <td><input type="text" class="qty1" value="1" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>23</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="2" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>131</td>
    </tr>
    <tr>
      <td>disprine</td>
      <td><input type="text" class="qty1" value="3" disabled/></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>37</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="4" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>173</td>
    </tr>
  </tbody>
</table>

3 个答案:

答案 0 :(得分：1)

你不断在arr中添加新值，并且这里有很多共享的可变状态。

如果表中没有那么多行，那么每次值更改时，最好只重新计算整个行。通过这种方式降低数据踩踏的风险较小：

$(document).ready(function() {
  $(document).on('change', '.qty1, .qty2', recalculate);

  function getTotal() {
    return $('#myTable tr')
      .toArray()
      .map($)
      .map(function (row) { 
        return row.find('.qty1').val() * row.find('.qty2').val(); 
      })
      .filter(function (val) { return !Number.isNaN(val); })
      .reduce(function (a, b) { return a + b; }, 0);
  }

  function recalculate() {
    $("#totalvalue").text(getTotal());
  }
});
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<table id="myTable" style="width: 100%;" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th><span id='totalvalue'></span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>

      <td>Satou</td>
      <td><input type="text" class="qty1" value="1" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>23</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="2" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>131</td>
    </tr>
    <tr>
      <td>disprine</td>
      <td><input type="text" class="qty1" value="3" disabled/></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>37</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="4" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>173</td>
    </tr>
  </tbody>
</table>
</body>
</html>

答案 1 :(得分：0)

你现在拥有它的方式是，你按照它们创建的顺序向数组添加新元素，这不允许你以后访问它们来更改它们，因为它们可以按任何顺序存储。

下面的代码根据val1的值保存数组中的每个值，以便每个元素在数组中都有一个指定的位置。因此，您可以在更改时更新任何值，如下所示：

var arr = [];

function one() {
  $(document).on("change", ".qty1", function() {
    var sumqty1 = $(this).val();
  });
}

function second() {
  $(document).on("change", ".qty2", function() {
    var val1 = $(this).closest('tr').find('.qty1').val();;
    var val2 = $(this).val();
    mul(val1, val2);
  });
}

function mul(a, b) {
  arr[a - 1] = a * b;
  var totalsum = 0;
  for (var i in arr) {
    var value = arr[i];
    totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
    $("#totalvalue").text(totalsum);
  }
  console.log(arr);
}

$(document).ready(function() {
  one();
  second();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th>Closing Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Product Name</th>
      <th>NSP</th>
      <th>Current Sales</th>
      <th><span id='totalvalue'></span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>

      <td>Satou</td>
      <td><input type="text" class="qty1" value="1" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>23</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="2" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>131</td>
    </tr>
    <tr>
      <td>disprine</td>
      <td><input type="text" class="qty1" value="3" disabled/></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>37</td>
    </tr>
    <tr>
      <td>panadol</td>
      <td><input type="text" class="qty1" value="4" disabled /></td>
      <td><input type="text" class="qty2" value="" /></td>
      <td>173</td>
    </tr>
  </tbody>
</table>

我还拿出了一些不必要的代码，包括：

  • hh函数中的second()声明（因为未使用该变量）
  • one()函数
    • 中有几行无关紧要的行
  • multi变量
  • sumqty1和sumqty2个变量（您可以使用val1和val2）

您的val1和val2变量不需要是全局变量，因为您只在一个函数中使用它们并将它们作为参数传递给另一个函数。

您也可以删除one()功能，因为这些值似乎是静态的 - 但我不确定您是否允许在原始代码中更改该值。

答案 2 :(得分：0)

我想说的是：

$(".qty1, .qty2").on("change", function(){
    var qty2 = $(".qty2"),
        total = 0;
    $(".qty1").each(function(ind){
        total += $(qty2[ind]).val() * $(this).val();
    })
    $("#totalvalue").text(total)
})

在文档末尾添加。

编辑了一点

相关问题
最新问题