javascript - 我制作了一个带有可编辑单元格的 HTML 表格。当我编辑单元格时，我需要该行及其下面的行来重新计算

Question

<table cellspacing="0" width="80%">
<thead>
    <tr>
        <th>
            Date
        </th>
        <th>
            Invoice amount
        </th>
        <th>
            Interest rate
        </th>
        <th>
            Interest amount
        </th>
        <th>
            Amortization
        </th>
        <th>
            Capital balance
        </th>       
    </tr>
</thead>
@foreach (var item in Model) {
<tr>
    <td align="center">
        @Html.DisplayFor(modelItem => item.Date)
    </td>
    <td align="center">
        <div contenteditable class="editor">
        @Html.DisplayFor(modelItem => item.InvoiceAmount)
        </div>
    </td>
    <td align="center">
        <div contenteditable class="editor">
        @Html.DisplayFor(modelItem => item.InterestRate)
        </div>
    </td>
    <td align="center">
        <div contenteditable class="editor">
        @Html.DisplayFor(modelItem => item.InterestAmount)
        </div>
    </td>
    <td align="center">
        <div contenteditable class="editor">
        @Html.DisplayFor(modelItem => item.Amortization)
        </div>
    </td>
    <td align="center">
        <div contenteditable class="editor">
        @Html.DisplayFor(modelItem => item.PresentValue)
        </div>
    </td>
</tr>
}

在上一个 View 中，您将数字添加到文本框中，然后单击按钮来计算将您带到该表的数字。计算方法在我的CalculationController中。我希望这个表像 Excel 中一样，行应该相互依赖。

例如，当我编辑“利率”时，我只需要更新该行及其下面的行。不是过去的那些。它的意思是年金计算。

感谢您的帮助。

Answer 1

Javascript(可能使用像 jQuery 这样的库)将使这变得非常容易。例如，以下内容根据“发票金额”单元格进行计算(假设您为其指定了“发票金额”ID)。当有人在该单元格中键入内容时，它就会这样做。然后它用结果更新另一个元素的值:

    $("#InvoiceAmount").bind('keyup keydown keypress',function()
        {
            // Your calculations here
            var invoiceMultiplied = $(this).val()*5;
            // Update another element with the result
            $('#AnotherElement').html(invoiceMultiplied);
        }
    );

如果您的计算极其复杂或者您需要访问页面上未加载的其他数据，那么您将需要考虑使用 AJAX 和您选择的服务器端语言。

JSfiddle:http://jsfiddle.net/technotarek/QSv4h/