Using jquery to dynamically add values in text box

Question

I have Razor UI where in I have 3 columns as shown below:

DEnom  amt   totalamt
$1     0     0
$5     4     20
$10    1     10
$50    0     0
$100   2     200

Total  7     230

Here the denomination may vary from time to time.

So populated the UI using for loop as below:

@for (int count = 0; count < Model.Bill.Count(); count++)
{
    <tr>
        <td>
            @Html.LabelFor(m => m.Bill[count].BillDenom)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Bill[count].Count)
        </td>
        <td>
            @Html.TextBoxFor(m => m.Amount)
        </td>
    </tr>
}

now if i enter amount for each denom the correspondong total amd totalamt should be calculated dynamically. How to achieve this using jQuery.

Answer 1

Generate a ID for all the controls dynamically while producing them like Denom_+count, amt_count and totalamt_+count.

Give a class to the Denom textbox and in jquery on event write the keyup functionality

$(document).on('keyup','.SpecifiedClass',function(){
  var id=$(this).attr('id');
  var pointer=id.split('_')[1];
  //Now you have the pointer to that row so you can calculate the other 
  //controls value and use the logic for summation
})