Adding a row before the next set of rows in a HTML dynamically generated Table
Question
-
User-973886032 posted
Hello,
I built a shopping cart and wanted to add to the bottom of each generated row, a custom row, in which I could display things like discounts. But so far, I cant seem to get my head around it. Its a basic table generated by c# in razor pages
@try { @if (Model.Tbl_Shopping_Basket.Count() != 0) { decimal sum = 0; <div class="container"> <div class="row"> <div class="col-md-9 X_border_thin text-center "> <table class="table-active table table-hover text-center X_border_thin" id="Basket"> <thead class="Buttons_Orange"> <tr> <th> Name </th> <th> Price </th> <th> Quantity </th> <th> Total </th> <th></th> </tr> </thead> <tbody> @foreach (var item in Model.Tbl_Shopping_Basket) { sum = sum + item.Basket_Total; <tr class="text-center">ehi <td> <a href="/products/@(item.ProductID)"> <span class="ml-3 classed " data-toggle="modal" data-target="#myModal" style="; left: 0; top: 0;" data-class="Customize"> <span class=""> <img src="/Images/Shops/Products/@(item.ProductID).png" alt="@item.ProductID)" id="Pro_customize" height="100" class="X_border_thin" /> </span> </span> </a> <br /> @Html.ActionLink(item.Tbl_Products.Product_Name, "Product Name", "#") </td> <td> @Html.DisplayFor(modelItem => item.Price_Unit) </td> <td class="text-center"> <input id="BID" type="hidden" value="@item.BasketID" class="text-center" /><br /> <div class="text-center minus"><button type="submit" class="form-control" style="width:50px;" value="-" id="minus">-</button><input id="Thea" class="form-control form-inline" type="number" autocomplete="off" style="width:70px;" min="1" size="5" max="10000" value="@item.Quantity" /><button type="submit" value="+" id="plus" class="form-control plus" style="width:50px;">+</button></div> <br /> <div class="text-center"> <a class="remove small" href="#" asp-for="@item.ProductID" id="">Delete</a> <span id="Update2" style="display:none">|</span> <a class="save_l small" href="#" id="Update" style="display:none">Update</a> </div> </td> <td> £ @Html.DisplayFor(modelItem => item.Basket_Total) </td> </tr> } </tbody> </table> </div> <div class=" position-sticky Summary col-md-3 "> <div class="font-weight-bold Buttons_Green ">YOUR ORDER SUMMARY</div> <br /> <div id="Summary_Context" class="container"> <br /> <div class="col-12 small">You have @*@(Model.Tbl_Shopping_Basket.Count())*@ Item(s) in your Basket </div> <hr /> <div class="col-12 font-weight-bold ">Your Total : £ @sum.ToString("#,##0.##")</div> </div> <div id="Summary_Context_Update2" style="display:none;"></div> <div id="Summary_Context_Update" style="display:none;"> <p>Please wait while we update your Basket..</p> Processing ... <img src="~/images/giphy.gif" /> </div> <br /> <input class="btn Buttons_Orange " id="CheckOut" type="submit" value="Proceed to Check Out" name="ehi" /> <hr /> <br /> <a href="/shops" class="small">Continue Shopping</a> <div> </div> <div id="result"></div> </div> </div> </div> } else { <div class="text-center"> <br /> <br /> <br /> Your basket is empty !<br /> <br /> <br /> </div> } } catch (Exception err) { @err.Message.ToString(); }see example on dropbox
https://www.dropbox.com/s/i3ke4teaatp7e57/table.png?dl=0
