how can multiply table columns element

jewel 681 Reputation points
2023-08-30T10:46:29.27+00:00

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>
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,118 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 54,621 Reputation points
    2023-08-30T16:53:05.98+00:00

    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");
    });
    
    
    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. AgaveJoe 26,031 Reputation points
    2023-08-30T12:31:12.4966667+00:00

    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>
    
    
    1 person found this answer helpful.