如何将两列的值相乘并显示在MVC的动态行中的另一列中

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>

表视图

现在我需要将netamt和qty相乘，并且需要在旁边的只读列中显示它。对于现有行，该值将从模型中检索，但是当netamt或qty中的值发生更改时，数据应该会更改。请帮我实现这个目标

Answer 1

您需要处理文本框的更改事件，获取相应行中两个文本框的值，并更新行总数，例如，如果行的html是

<tr>
  <td><input type="text"></td>
  <td><input type="text"></td>
  <td></td> // cell for the row total
  <td><button type="button">X</button></td>
</tr>

然后脚本将是

table.on('change', 'input[type="text"]', function() {
  var cells = $(this).closest('tr').children('td');
  var value1 = cells.eq(0).find('input').val();
  var value2 = cells.eq(1).find('input').val();
  cells.eq(2).text(new Number(value1) * new Number(value2));
});

请参阅this fiddle，这是对您的更新 previous question，