Làm cách nào để thao tác các thành phần HTML bằng jquery?

Question

Tôi có bảng này tải từ cơ sở dữ liệu, vì vậy tất cả các phần tử từ each row có cùng thuộc tính.

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

tôi đã cố gắng để làm cho jQuery nhưng không thể làm việc nó ra vì mỗi hàng có thuộc tính giống tôi không thể chọn hàng cụ thể và cập nhật nội dung của nó để làm công việc này.

Tôi đã tìm kiếm rất nhiều, nhưng tất cả những gì tôi tìm thấy là thao tác HTML dựa trên id và class selector mà tôi không thể sử dụng được vì các phần tử từ mỗi hàng có cùng một lớp và tôi không thể cung cấp id duy nhất cho mọi phần tử. từ cơ sở dữ liệu (PHP).

Tôi thực sự đánh giá cao nếu có ai có thể cho tôi biết cách thực hiện điều này trong jQuery. Và vui lòng không cho tôi liên kết đến thao tác tĩnh HTML bằng cách sử dụng jQuery Tôi muốn có giải pháp cho động HTML elements.

Answer 1

Cập nhật: Dưới đây là ví dụ làm việc: Fiddle example và mã là:

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

tại sao không sử dụng lựa chọn jQuery dựa trên lớp học? bạn có ý nghĩa để thay đổi attribtues của chỉ một số yếu tố, và không phải toàn bộ lớp học?

Nếu bạn quyết định bạn không thể sử dụng lớp dựa lựa chọn jQuery, bạn có thể nghỉ mát để thay đổi các lớp học với jQuery, mà là rất dễ dàng:

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

Answer 3

Hi tôi đã thêm vào làm việc code demo giúp bạn rất nhiều.

tôi đã thêm sự kiện nhấp chuột vào nút và trong sự kiện, với nút tôi có tìm kiếm phần tử cha và phần tử cha tôi có thể tìm mọi thứ bên trong tr đó bằng phương pháp jquery.

xem mã và hiểu nó bướng bỉnh nó sẽ giúp bạn

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

Xin chào, tôi đã thêm mã demo giúp bạn. và đối với mỗi td mới, bạn cần nhập loại chứa id sản phẩm và tên của nó và nó sẽ bị ẩn. Bằng cách lấy id và tên sản phẩm, bạn có thể cập nhật và xóa cùng một sản phẩm.

Lưu ý: nếu bạn đang truy cập cơ sở dữ liệu biểu mẫu dữ liệu, bạn sẽ nhận được id sản phẩm và tên của nó và bạn có thể chuyển các giá trị này vào thẻ đầu vào như đề cập ở trên tương ứng.

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

Dưới đây là giải pháp cuối cùng tôi đã làm việc ra từ câu trả lời của Rahul.

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