locked
iterate over the dom elements to multiply values RRS feed

  • Question

  • User-780198206 posted

    I wanto to know how to iterate over the table elments to change values depending of what I write int the imput

    I am very knew to javascritp,I wanted to do it with typescritp, but there is no fórum for typescritp in asp.net fórums, so I decided to do if with javascrip or jquery

    I don't know how to get the elements on the dom, for example I if I change the arti.qty, I want the changes to be made on arti.LineTotal, and Order.stotal dynamicly

    arti.qty * arti.Price = arti.lineTotal

    sum(linetotal) = Orer.sTotal

    <div class="table-responsive">
        <table class="table">
            <tbody>
                @foreach (var arti in Model.OrderItems)
                {
                    <tr>
                        <td><input asp-for=@arti.qty/></td>
                        <td>@arti.name</td>
                        <td><input asp-for="@arti.price" /></td>

                       <td><input asp-for="@arti.lineTotal" /></td>
                    </tr>

                }
                <tr>
                    <td>@Model.Order.sTotal</td>
                </tr>
        </table>
    </div>

    <form asp-action="CreateOrder">
        <div class="form-horizontal">

            <div class="form-group">
                <label asp-for="Order.sTotal" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <input asp-for="Order.sTotal" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </form>

    Tuesday, May 3, 2016 5:15 AM

Answers

  • User-271186128 posted

    Hi longinos,

    I suggest you could refer to the following code:

    Code in control:

            public ActionResult DisplayProduct()
            {
                List<Product> list = new List<Product>();
                Product p1 = new Product() { productID = 1001, productName = "AAA" };
                Product p2 = new Product() { productID = 1002, productName = "BBB" };
    
                list.Add(p1);
                list.Add(p2);
                return View(list);
            }

    Code in view:

    @model IEnumerable<MVC5APP.Models.Product>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.productName)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @*@Html.DisplayFor(modelItem => item.productName)*@
                <input asp-for=@item.productName value=@item.productName />
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.productID }) |
                @Html.ActionLink("Details", "Details", new { id=item.productID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.productID })
            </td>
        </tr>
    }
    
    </table>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".table tr:gt(0)").each(function () {
                var txt = $(this).find("td:first").find(":input");
                if (txt != null && txt != undefined) {
                    var value = txt.val();
                    txt.val("Product: " + value);
                }
            })
        })
    </script>
    

    $(".table tr:gt(0)"): loop through the table row except the header row.

    $(this).find("td:first").find(":input"): find the first td and the input tag.

    More details about JQuery selector, you can refer to this article: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2016 7:26 AM
  • User-474980206 posted

    you should add a selector to the inputs so you can change markup without breaking:

        @foreach (var arti in Model.OrderItems)
                {
                    <tr data-calc="row">
                        <td><input asp-for=@arti.qty data-calc="qty"/></td>
                        <td>@arti.name</td>
                        <td><input asp-for="@arti.price" data-calc="price" /></td>
    
                       <td><input asp-for="@arti.lineTotal" data-calc="lineTotal"/></td>
                    </tr>
    
                }
                <tr>
                   <td data-calc="total">@Model.Order.sTotal</td>
                </tr>
    

    then the javascript is:

    $(function() {
       $("[data-calc=qty]").keyup(function(){
           // row total
           var $row = $(this).closest("[data-calc=row]");
           $row.find("[data-calc=lineTotal]").val((parseFloat($row.find("[data-calc=qty]").val()) || 0) * (parseFloat($row.find("[data-calc=price]").val()) || 0))
    
           // total
           var tot = 0;
           $("[data-calc=price]").each(function(v) {
              tot += parseFloat($(this).val()) || 0;
           };
           $("[data-calc=total]").text(tot);
       });
    });
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2016 4:08 PM

All replies

  • User527778624 posted

    Hi,

    You can try with jquery, check this site:

    http://stackoverflow.com/questions/19102795/changing-price-based-on-quantity

    Tuesday, May 3, 2016 11:57 AM
  • User-271186128 posted

    Hi longinos,

    I suggest you could refer to the following code:

    Code in control:

            public ActionResult DisplayProduct()
            {
                List<Product> list = new List<Product>();
                Product p1 = new Product() { productID = 1001, productName = "AAA" };
                Product p2 = new Product() { productID = 1002, productName = "BBB" };
    
                list.Add(p1);
                list.Add(p2);
                return View(list);
            }

    Code in view:

    @model IEnumerable<MVC5APP.Models.Product>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.productName)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @*@Html.DisplayFor(modelItem => item.productName)*@
                <input asp-for=@item.productName value=@item.productName />
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.productID }) |
                @Html.ActionLink("Details", "Details", new { id=item.productID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.productID })
            </td>
        </tr>
    }
    
    </table>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".table tr:gt(0)").each(function () {
                var txt = $(this).find("td:first").find(":input");
                if (txt != null && txt != undefined) {
                    var value = txt.val();
                    txt.val("Product: " + value);
                }
            })
        })
    </script>
    

    $(".table tr:gt(0)"): loop through the table row except the header row.

    $(this).find("td:first").find(":input"): find the first td and the input tag.

    More details about JQuery selector, you can refer to this article: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2016 7:26 AM
  • User-474980206 posted

    you should add a selector to the inputs so you can change markup without breaking:

        @foreach (var arti in Model.OrderItems)
                {
                    <tr data-calc="row">
                        <td><input asp-for=@arti.qty data-calc="qty"/></td>
                        <td>@arti.name</td>
                        <td><input asp-for="@arti.price" data-calc="price" /></td>
    
                       <td><input asp-for="@arti.lineTotal" data-calc="lineTotal"/></td>
                    </tr>
    
                }
                <tr>
                   <td data-calc="total">@Model.Order.sTotal</td>
                </tr>
    

    then the javascript is:

    $(function() {
       $("[data-calc=qty]").keyup(function(){
           // row total
           var $row = $(this).closest("[data-calc=row]");
           $row.find("[data-calc=lineTotal]").val((parseFloat($row.find("[data-calc=qty]").val()) || 0) * (parseFloat($row.find("[data-calc=price]").val()) || 0))
    
           // total
           var tot = 0;
           $("[data-calc=price]").each(function(v) {
              tot += parseFloat($(this).val()) || 0;
           };
           $("[data-calc=total]").text(tot);
       });
    });
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2016 4:08 PM