how can multiply table columns element

Question

My requirement is that the product of the two column data will show in the third column. And the sum of the third column will show in the table footer.

Like

Rate  Qty Value

25  4    100

4    2    8

5    3    12

Total value : 120

If any experienced would help me. I would benefit. thanks in advance

@model IEnumerable<aspCoreProject.Models.tbl_Product>
<table class="mdl-data-table" id="MyDataTable">
        <tr>
            <th>
                name
            </th>
            <th>
                rate
            </th>
            <th>
                Qty
            </th>
             <th>
                Value
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.ProductName</td>
            <td><label>@item.PurchaseRate</label> </td>
                <td><input type="number" class="txt_qty" /></td>
                <td><label class="txtvalue"></label></td>
            </tr>
        }
        <tfoot>
          <tr>
            <td>Total Value :</td>
         
            <td> Sum of Value</td>
        </tr>
        </tfoot>
</table>

Answer 1

I assume you want this client side. simple javascript:

$(function() {
   $("table.mdl-data-table input").on("input",function() {
      var total = 0;
      $("table.mdl-data-table tbody tr").each(function(i,tr) {
         var $tds = $(tr).find('td');
         if ($tds.length > 0) { 	
			var c1 = Number($($tds[1]).find("label").text());
        	var c2 = Number($($tds[2]).find("input").val());
       		val =  (c1 > 0 && c2 > 0) ? c1 * c2 : 0;
     		$($tds[3]).find("label").text(val);
         	total += val;
         }
      });
      $("table.mdl-data-table tfoot tr td")[1].innerHTML = total
   }).trigger("input");
});

Answer 2

Example MVC sample.

Model

    public class tbl_Product
    {
        [Display(Name = "Name")]
        public string ProductName { get; set; }
        [Display(Name = "Rate")]
        public decimal PurchaseRate { get; set; }
        [Display(Name = "Qty")]
        public int Qauntity { get; set; }
        [Display(Name = "Value")]
        public decimal Value
        {
            get
            {
                return PurchaseRate * Qauntity;
            }
        }
    }

Controller

    public class ProductController : Controller
    {
        public IActionResult Index()
        {
            List<tbl_Product> Items = new List<tbl_Product>()
            {
                new tbl_Product()
                {
                    ProductName = "Product 1",
                    PurchaseRate= 25,
                    Qauntity= 4,
                },
                new tbl_Product()
                {
                    ProductName = "Product 2",
                    PurchaseRate= 4,
                    Qauntity= 2,
                },
                new tbl_Product()
                {
                    ProductName = "Product 3",
                    PurchaseRate= 5,
                    Qauntity= 3,
                }
            };

            return View(Items);
        }
    }

View

@model IEnumerable<MvcDemo.Models.tbl_Product>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ProductName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PurchaseRate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Qauntity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Value)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ProductName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PurchaseRate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Qauntity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Value)
            </td>
        </tr>
}
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>Total Value :</td>
            <td>@Model.Sum(p => p.Value)</td>
        </tr>
    </tfoot>
</table>