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

Question

我在剃刀中有一张桌子，我通过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将其放入另一个输入。当用户更改输入值时，保存该值的输入可能会自动更改。如果有人可以帮助我，我将不胜感激。

Answer 1

如果您正在使用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" />

Answer 2

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

Answer 3

我想要每行的多个计数和价格，并使用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>