Как управлять элементами HTML с помощью jquery?

Question

У меня есть эта таблица, которая загружается из базы данных, поэтому все элементы от each row имеют одинаковые атрибуты.

<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> 

Я попытался сделать jQuery но не мог работать его, так как каждая строка имеет те же атрибуты, я неспособен выбрать конкретную строку и обновить его содержимое, чтобы сделать эту работу.

Я много искал, но все, что я нашел, - это манипуляция HTML, основанная на селекторе id и класса, которую я не могу использовать, поскольку элементы из каждой строки имеют один и тот же класс, и я не могу дать уникальный идентификатор каждому элементу, потому что они загружают из базы данных (PHP).

Я был бы очень признателен, если бы кто-нибудь мог сказать мне, как это сделать в jQuery. И, пожалуйста, не давайте мне ссылки на статические HTML манипуляции с использованием jQuery Я хочу решение для динамического HTML elements.

Answer 1

Обновлено: Вот рабочий пример: Fiddle example и код:

$('.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); 

}); 

Answer 2

Почему бы не использовать класс jQuery на основе классов? вы имеете в виду изменить атрибуты только целого ряда элементов, а не всего класса?

Если вы решили не использовать на основе выбора JQuery класса, вы можете прибегнуть к изменению классов с JQuery, который очень легко:

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

Answer 3

Привет я добавил работает демо-код, который поможет вам много.

Я добавил событие click на кнопку, а в случае w.r на кнопку у меня есть поиск элемента tr из элемента tr и из родительского tr я могу найти каждую вещь внутри tr с помощью jquery-метода.

увидеть код и понять его вызывающе, это поможет вам

$(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 4

Привет, я добавил демо-код, который поможет вам. и для каждого нового td вам нужно ввести тип, который содержит идентификатор продукта и его имя, и он должен быть скрыт. Принимая идентификатор и имя продукта, вы можете обновлять и удалять один и тот же продукт.

Примечание: если вы получаете доступ к базе данных данных, вы получите идентификатор продукта и его имя, и вы можете передать эти значения для ввода тега, как указано выше, соответственно.

$(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"> 
 
\t <input type="hidden" name="ProductName" value="productID"> 
 
     \t <td class="product-name">Product one name</td> 
 

 
     \t <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> 
 
    \t <td class="unit-price">50</td> 
 
    \t <td class="total-price">100</td> 
 
    \t <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>

Answer 5

Вот окончательное решение, которое я разработал от ответа Рахул в.

$(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>