Question

我有动态表的视图。加载页面时，可能存在现有行。用户也可以添加新行并保存相同的行。在表中有两列net_amt和quantity。在表格底部我需要显示这些列的总数是否可能。请分享一些有关相同的想法。

表的动态模板

<table id="Newservice" style="display:none">
<tr>
<td><input class="" style="width:40px" type="text" name="provider_service_dtls[#].net_amt" value /></td>
<td>
<input class="" style="width:25px" type="text" name="provider_service_dtls[#].quantity" value />
<input type="hidden" name="provider_service_dtls.Index" value="%" />
</td>
<td><input id="delete" class="delete" value="X" type="button"></td>
</tr>
</table>

视图中的表格

@if (Model != null)

    {
    for (int i = 0; i < Model.provider_service_dtls.Count; i++)
    {
    <td>
    @Html.TextBoxFor(m => m.provider_service_dtls[i].net_amt, new { style = "width: 40px;"})
    <td>
    @Html.TextBoxFor(m => m.provider_service_dtls[i].quantity, new { style = "width: 25px;" })
    <input type="hidden" name="provider_service_dtls.Index" value="@i" />
    </td>
     <td><input id="delete" class="delete" value="X" type="button"></td>
    </tr>
     }
    }
    </table>

浏览器中的表格视图 enter image description here

当打开请求时，将有零行或更多行。添加行并在填充文本框中的值后，总计应自动更改。我认为它只能通过jquery，但我完全被困在这里。请帮忙

Answer 1

您需要javascript / jquery来处理文本框的.change()事件。由于您可以动态地向表中添加新行，因此您还需要使用.on()来使用事件委派。以下示例基于包含id="myTable"的表格，其中包含第二个tbody元素，其中包含行id="totals"

HTML

<table id="myTable">
  <tbody>
    .... // you for loop for generating existing rows
  </tbody>
  <tbody>
    <tr id="totals">
      <td>##</td> // insert existing total
      <td>##</td> // insert existing total
      <td></td> // blank (delete button column
  </tbody>

脚本

var body= $('#myTable').children('tbody').first();
var totals = $('#totals');
body.on('change', 'input[type="text"]', function() {
  var total = 0;
  var columnIndex = $(this).closest('td').index();
  var rows = body.find('tr');
  $.each(rows, function() {
      var amount = $(this).children('td').eq(columnIndex).children('input[type="text"]').val();    
      total += new Number(amount);
  });
  totals.children('td').eq(columnIndex).text(total);
});

Refer this fiddle for working example

Answer 2

尝试这个小数量添加功能：

function recalculate() {
  $('tr').each(function() {
    $(this).find('button').parent().remove();
    $(this).append("<td><button type='button'>" + ($(this).find('input:first').val() * $(this).find('input:last').val()) + "</button></td>");
  });
}

$('input').change(function() {
  recalculate()
});

recalculate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="number" value="1" />
    </td>
    <td>
      <input type="number" value="2" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="number" value="3" />
    </td>
    <td>
      <input type="number" value="4" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="number" value="5" />
    </td>
    <td>
      <input type="number" value="6" />
    </td>
  </tr>
</table>

如何在MVC中的动态表中查找列值的总和

2 个答案: