How to manipulate HTML elements using jquery?

Question

I have this table which loads from a database, so all elements from each row have 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 couldn't work it out since every row has same attributes I am unable to select specific row and update it's contents to make this work.

I searched a lot, but all I found is HTML manipulation based on id and class selector which I can't use since elements from each row have same class and I can't give unique id to every element because they load from database(PHP).

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

Answer 1

Hi i have added working demo code which help you lot.

i have added a click event on button and in event w.r to the button i have search for parent tr of element and from parent tr i can find every thing inside that tr with 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>

Answer 2

Hi i have added demo code which help you. and for each new td you need to input type which contain product id and its name and it should be hidden. By taking product id and name you can update and delete the same product.

Note : if you are accessing data form database you will get product id and its name and you can pass these values to input tag as mention 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>