jquery का उपयोग कर HTML तत्वों का उपयोग कैसे करें?

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 करने की कोशिश की, लेकिन यह काम नहीं कर सकता है के बाद से हर पंक्ति ही गुण मैं विशिष्ट पंक्ति का चयन करें और यह सामग्री है यह काम करने के लिए अद्यतन करने में असमर्थ हूँ है।

मैंने बहुत कुछ खोजा, लेकिन मुझे जो कुछ मिला वह एचटीएमएल मैनिपुलेशन आईडी और क्लास चयनकर्ता पर आधारित है जिसका उपयोग मैं नहीं कर सकता क्योंकि प्रत्येक पंक्ति के तत्वों में एक ही कक्षा होती है और मैं प्रत्येक तत्व को अद्वितीय आईडी नहीं दे सकता क्योंकि वे लोड करते हैं डेटाबेस से (PHP)।

अगर कोई मुझे बता सकता है कि jQuery में यह कैसे करना है तो मैं वास्तव में सराहना करता हूं। और कृपया मुझे jQuery का उपयोग करके स्थिर HTML मैनिपुलेशन के लिंक न दें, मैं गतिशील 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

हाय मैं डेमो कोड है जो आप बहुत मदद काम कर जोड़ लिया है।

मैंने बटन पर एक क्लिक इवेंट जोड़ा है और बटन में ईवेंट w.r में मैंने तत्व के पैरेंट टी के लिए खोज की है और पैरेंट टी से मैं jquery विधि के साथ उस tr के अंदर हर चीज़ पा सकता हूं।

कोड देख सकते हैं और यह समझते हैं कि यह बेखटके आप

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

हाय मैंने डेमो कोड जोड़ा है जो आपकी मदद करता है। और प्रत्येक नए टीडी के लिए आपको इनपुट प्रकार की आवश्यकता होती है जिसमें उत्पाद आईडी और उसका नाम होता है और इसे छुपाया जाना चाहिए। उत्पाद आईडी और नाम लेकर आप एक ही उत्पाद को अपडेट और हटा सकते हैं।

नोट: यदि आप डेटा फॉर्म डेटाबेस तक पहुंच रहे हैं तो आपको उत्पाद आईडी और उसका नाम मिलेगा और आप इन मानों को क्रमशः ऊपर उल्लिखित इनपुट टैग में पास कर सकते हैं।

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