如何计算表中一个字段的总和并将其放入输入中

Posted 2021-03-27

我在剃刀中有一张桌子，我通过ViewBag从控制器发送数据

<table>
   <thead>
       <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Count</th>
       </tr>
   </thead>
   <tbody>
       @foreach(var item in ViewBag.Products)
       {
            <tr>
                <td>@item.Name</td>
                <td>@item.Category</td>
                <td>
                  <input type="text" class="form-control" value="@item.Price" />
               </td>
                <td>
                    <input type="text" class="form-controll" value="@item.Count" />
                </td>
            </tr>
       }
   </tbody>
</table>


<input type="text" class="form-control" value="@Model.TotalPrice" />

我想要每行的多个计数和价格，并使用javascript将其放入另一个输入。当用户更改输入值时，保存该值的输入可能会自动更改。如果有人可以帮助我，我将不胜感激。

答案

如果您正在使用jquery，那么它可以实现如下。

您可以在total或price输入的每个按键上更新您的count。

在你的input上添加一些课程。在我的例子中，我把班级作为price，并将班级total作为显示总和。

添加keyup事件如下。还有trigger它在$(document).ready上初始设定总值。

$('.price').on('keyup', function() {
  var val = +$(this).val();
  var valSibling = +$(this).parent().siblings('td').find('.price').val();

  if (isNaN(val) || isNaN(valSibling))
    return;

  $(this).parent().siblings('td').find('.total').val(val * valSibling);

  var finaltotal = 0;
  $('.total').each(function() {
    if(!isNaN($(this).val()))
      finaltotal += Number($(this).val());
  });
  $('.finaltotal').val(finaltotal);
});

$(document).ready(function(){
  $('.price').trigger('keyup');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Price</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name1</td>
      <td>Category1</td>
      <td><input type="text" class="price form-control" value="40" /></td>
      <td><input type="text" class="price form-control" value="4" /></td>
      <td><input type="text" class="total form-control" /></td>
    </tr>
    <tr>
      <td>Name2</td>
      <td>Category2</td>
      <td><input type="text" class="price form-control" value="20" /></td>
      <td><input type="text" class="price form-control" value="2" /></td>
      <td><input type="text" class="total form-control" /></td>
    </tr>
  </tbody>
</table>
<input type="text" class="finaltotal form-control" />

另一答案

var inputs = $('#container input');
inputs.keyup(function() {
  var arr = inputs.toArray();
  var sum = 0;
  for (var i = 0; i < arr.length / 2; i++)
    sum += arr[i * 2].value * arr[i * 2 + 1].value;
  $('#result').val(sum);
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Count</th>
      <th>Price</th>
    <tr>
  </thead>
  <tbody id='container'>
    <tr>
      <td><input type='number' value='1' /></td>
      <td><input type='number' value='2' /></td>
    </tr>
    <tr>
      <td><input type='number' value='10' /></td>
      <td><input type='number' value='20' /></td>
    </tr>
  </tbody>
</table>

Total: <input type='number' readonly id='result' readonly value='202' />

另一答案

我想要每行的多个计数和价格，并使用javascript将其放入另一个输入。

你可以在每个td中添加另一个tr。然后遍历所有tbody tr来计算值：

var tr = document.querySelectorAll('tbody tr');
function calculate(){
  tr.forEach(function(el){
    var td = el.querySelectorAll('td');

    // If there is invalid number in input then no change in total.
    if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
      return;

    td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
  });
}

calculate();

.form-control{
 width: 50px;
}

<table>
   <thead>
       <tr>
          <th>Name</th>
          <th>Category</th>
          <th>Price</th>
          <th>Count</th>
          <th>Total</th>
       </tr>
   </thead>
   <tbody>
        <tr>
            <td>Name1</td>
            <td>Category1</td>
            <td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
            <td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
            <td><input type="text" class="form-control" /></td>
        </tr>
         <tr>
            <td>Name2</td>
            <td>Category2</td>
            <td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
            <td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
            <td><input type="text" class="form-control" /></td>
        </tr>
         <tr>
            <td>Name3</td>
            <td>Category3</td>
            <td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
            <td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
            <td><input type="text" class="form-control" /></td>
        </tr>
   </tbody>
</table>

以上是关于如何计算表中一个字段的总和并将其放入输入中的主要内容，如果未能解决你的问题，请参考以下文章

如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段？

如何从 mysql 表中选择 php 中的个人姓氏并将其放入 $_Session 变量中

我如何提取合并的数据并将其放入不同的工作表中？

从数据库中获取数据并放入 GUI 中的表中

如何更改片段中的主要活动变量

如何计算来自不同datagridview的每列总和之间的差异并将其显示在datagridview中