How to find total of a column value in a dynamic table in MVC

Question

I have a view with dynamic table. When loading the page there can be existing rows. Also user can add new rows and can save the same. In the table there are two columns net_amt and quantity. at the bottom of the table I need to show the total of these column is it possible. Please share some idea regarding the same.

Dynamic template of table

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

Table inside the view

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

Table View in Browser

When open a request there will be zero rows or more. When adding rows and after filling the values in the text box the total should change automatically. I think its only possible by jquery but im totally stucked here. please help

Answer 1

You will need javascript/jquery to handle the .change() event of your textboxes. Since you can dynamically add new rows to to table, you will also need to use event delegation using .on(). The following example is based on your table having id="myTable" and it includes a second tbody element with a row 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>

Script

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

Try out this little quantity adding function:

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>