All geek questions in one place

How to manage HTML elements using jquery?

I have this table that is loaded from the database, so all the elements from each row have the same attributes.

 <table class="table table-responsive"> <tr> <th>Product name</th> <th>Quantity</th> <th>Price per unit</th> <th>Total</th> <th>Action</th> </tr> <tr> <td class="product-name">Product one name</td> <td class="product-quantity"> <!-- plus button should increase quantity and update total based on unit_price*quantity --> <button class="btn"> +</button> <input type="text" value="2"/> <button class="btn"> -</button> </td> <td class="unit-price">50</td> <td class="total-price">100</td> <td> <!-- this should delete entire row --> <button class="product-delete">Delete</button> </td> </tr> ... </table> <!-- on each quantity change this needs to update --> <div class="grand-total"> 5000 </div>

I tried to make jQuery , but could not handle it, since each row has the same attributes. I cannot select a specific row and update its contents to make this work.

I searched a lot, but all I found was HTML manipulation based on id and class selector, which I cannot use, since the elements from each row have the same class, and I cannot give a unique identifier to each element because they are loaded from the database (PHP).

I would really appreciate it if someone could tell me how to do this in jQuery . And please don't give me links to static HTML manipulation using jQuery I want a solution for dynamic HTML elements .

+5
source share
5 answers

Updated: Here is a working example: Script example and code:

 $('.btn, .product-delete').on("click", function(){ $this=$(this); var unitPrice=parseInt($this.parents("tr").find(".unit-price").text()); switch($this.text()){ case " +": currentVal= parseInt($this.parents("tr").find("input[type='text']").val()); newVal=currentVal+1; $this.parents("tr").find("input[type='text']").val(newVal); $this.parents("tr").find(".total-price").text(unitPrice*newVal); break; case " -": currentVal= parseInt($this.parents("tr").find("input[type='text']").val()); if(currentVal==0){ break; } newVal=currentVal-1; $this.parents("tr").find("input[type='text']").val(newVal); $this.parents("tr").find(".total-price").text(unitPrice*newVal); break; case "Delete": $this.parents("tr").remove(); } //sum all total cols var total=0; $(".total-price").each(function(){ total+= parseInt($(this).text()); }); $(".grand-total").text("Total "+total); });
0
source

Hi, I have added a working demo code that will help you a lot.

I added a click button to the button, and in the wr event on the button I have a search for the parent tr of the element, and from the parent tr I can find every thing inside this tr using the jquery method.

see the code and understand it defiantly, it will help you

 $(document).ready(function(e) { $(document).on("click", ".addContity", function(e) { var parentTR = $(this).closest("tr"); console.log(parentTR); console.log($(parentTR).find(".quantityText")); var quantityText = parseInt($(parentTR).find(".quantityText").val()); $(parentTR).find(".quantityText").val(quantityText + 1); }); $(document).on("click", ".removeQuatity", function(e) { var parentTR = $(this).closest("tr"); console.log(parentTR); var quantityText = parseInt($(parentTR).find(".quantityText").val()); if (quantityText > 0) { $(parentTR).find(".quantityText").val(quantityText - 1); } }); $(document).on("click", ".btnDelete", function(e) { alert("button delete logic will go here."); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-responsive"> <tr> <th>Product name</th> <th>Quantity</th> <th>Price per unit</th> <th>Total</th> <th>Action</th> </tr> <tr> <td class="product-name">Product one name</td> <td class="product-quantity"> <button class="btn addContity">+</button> <input type="text " class="quantityText" value="2" /> <button class="btn removeQuatity">-</button> </td> <td class="unit-price">50</td> <td class="total-price">100</td> <td> <button class="product-delete btnDelete">Delete</button> </td> </tr> </table> <div class="grand-total">5000</div>
+1
source

Hi, I have added a demo code that will help you. and for each new td you need to enter a type that contains the product identifier and its name, and it should be hidden. By accepting the product identifier and name, you can update and delete the same product.

Note. If you access the database of the data form, you will receive a product identifier and its name, and you can pass these values ​​to enter the tag, as described above, respectively.

 $(document).ready(function(){ $('#AddButton').click( function() { var counter = $('#TextBox').val(); counter++ ; $('#TextBox').val(counter); }); $('#removButton').click( function() { var counter = $('#TextBox').val(); counter-- ; $('#TextBox').val(counter); }); $('#productDel').click( function() { var counter = $('#TextBox').val(); counter-- ; $('#TextBox').val(counter); }); $(document).on("click", ".productDel", function(e) { alert("Are You sure want to delete product Name"); }); $( "#AddButton" ).click(function() { var produnitPric = parseInt($( "td.unit-price" ).html()); var prodtotalPric = parseInt($( "td.total-price" ).html()); var priceperunit = produnitPric + 50; var totalPrice = prodtotalPric + 30; alert("Total Price :" + totalPrice); alert("Total Price Per Unit :" + priceperunit); }); }); 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Select</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div class="box current" style="background: red"></div> <div class="box" style="background: blue"></div> <table class="table table-responsive"> <thead> <th>Product name</th> <th>Quantity</th> <th>Price per unit</th> <th>Total</th> <th>Action</th> </thead> <tbody> <tr class="success"> <input type="hidden" name="ProductName" value="productID"> <td class="product-name">Product one name</td> <td class="product-quantity"><input type="Button" class="btn btn-danger btn-xs" id='removButton' value="-" /> <input type="text" name="TextBox" id="TextBox" value="5" /> <input type="Button" id='AddButton' value="+" class="btn btn-success btn-xs" /> </td> <td class="unit-price">50</td> <td class="total-price">100</td> <td><button class="productUpdate btn btn-success btn-xs">Update</button> <button class="productDel btn btn-danger btn-xs">Delete</button></td> </tr> </tbody> </table> </body> </html>
+1
source

why not use class-based jQuery selection? do you mean changing the attributes of only a number of elements, and not the entire class?

If you decide that you cannot use class-based jQuery selection, you can resort to changing classes using jQuery, which is very simple:

 $(".product-name").toArray().forEach(function(product){ if (product.innerText == "name1") // product.className = "some other class" });
0
source

Here is the final solution that I developed from Rahul's answer.

 $(document).ready(function(e) { var total = 0; $('.totalPriceText').each(function(){ total += parseInt($(this).text()); $(".grand-total").text(total); }); $(document).on("click", ".addContity", function (e) { var parentTR = $(this).closest("tr"); var quantityText = parseInt($(parentTR).find(".quantityText").val()); var priceText = parseInt($(parentTR).find(".priceText").text()); var totalPriceText = parseInt($(parentTR).find(".totalPriceText").text()); $(parentTR).find(".quantityText").val(quantityText + 1); $(parentTR).find(".totalPriceText").text((quantityText + 1) * priceText); var total = 0; $('.totalPriceText').each(function(){ total += parseInt($(this).text()); $(".grand-total").text(total); }); }); $(document).on("click", ".removeQuatity", function (e) { var parentTR = $(this).closest("tr"); var quantityText = parseInt($(parentTR).find(".quantityText").val()); var priceText = parseInt($(parentTR).find(".priceText").text()); var totalPriceText = parseInt($(parentTR).find(".totalPriceText").text()); if (quantityText > 1) { $(parentTR).find(".quantityText").val(quantityText - 1); $(parentTR).find(".totalPriceText").text((quantityText - 1) * priceText); var total = 0; $('.totalPriceText').each(function(){ total += parseInt($(this).text()); $(".grand-total").text(total); }); } }); $(document).on("click", ".btnDelete", function (e) { var parentTR = $(this).closest("tr"); $(parentTR).remove(); var total = 0; $('.totalPriceText').each(function(){ total += parseInt($(this).text()); $(".grand-total").text(total); }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-responsive"> <tr> <th>Product name</th> <th>Quantity</th> <th>Price per unit</th> <th>Total</th> <th>Action</th> </tr> <tr> <td class="product-name">Product one name</td> <td class="product-quantity"> <button class="btn addContity">+</button> <input type="text " class="quantityText" value="1" /> <button class="btn removeQuatity">-</button> </td> <td class="unit-price priceText">100</td> <td class="total-price totalPriceText">100</td> <td><button class="product-delete btnDelete">Remove</button></td> </tr> <tr> <td class="product-name">Product two name</td> <td class="product-quantity"> <button class="btn addContity">+</button> <input type="text " class="quantityText" value="1" /> <button class="btn removeQuatity">-</button> </td> <td class="unit-price priceText">200</td> <td class="total-price totalPriceText">200</td> <td><button class="product-delete btnDelete">Remove</button></td> </tr> <tr> <td class="product-name">Product three name</td> <td class="product-quantity"> <button class="btn addContity">+</button> <input type="text " class="quantityText" value="1" /> <button class="btn removeQuatity">-</button> </td> <td class="unit-price priceText">50</td> <td class="total-price totalPriceText">50</td> <td><button class="product-delete btnDelete">Remove</button></td> </tr> </table> Grand Total<div class="grand-total">0</div>
0
source

Source: https://habr.com/ru/post/1243050/

More articles:


All Articles