Q:

I've made an HTML table with editable cells. When I edit a cell I need the row and the rows below it to recalculate

<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>
}

In the previous view you add numbers into textboxes and click on a button to calculate which brings you to this table. The calculation method is in my CalculationController. I want this table to be like in excel, the rows should be dependent of each other.
For example, when I edit the "interest rate" I just need to update that row and the rows beneath. Not those in the past. Its meant to be an annuity calculation.
Thankful for any help.

A:

Javascript (possibly using a library like jQuery) would make this pretty easy. For example, the following makes a calculation based on the Invoice Amount cell (assuming you've given it an ID of InvoiceAmount). It does so as someone types into that cell. Then it updates the value of another element with the result:
    $("#InvoiceAmount").bind('keyup keydown keypress',function()
        {
            // Your calculations here
            var invoiceMultiplied = $(this).val()*5;
            // Update another element with the result
            $('#AnotherElement').html(invoiceMultiplied);
        }
    );

If your calculations are extremely complex or you need to access other data that's not loaded on the page, then you will want to consider AJAX with your server side language of choice.
JSfiddle: http://jsfiddle.net/technotarek/QSv4h/

