jquery - 如何使用 jquery 操作 HTML 元素？

Question

我有这个从数据库加载的表，所以每一行中的所有元素都具有相同的属性。

<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 但无法解决，因为每一行都有相同的属性，我无法选择特定的行并更新它的内容来完成这项工作。

我搜索了很多，但我发现的只是基于 id 和类选择器的 HTML 操作，我无法使用它们，因为每一行的元素都具有相同的类，而且我无法为每个元素提供唯一的 id，因为它们是从数据库(PHP)。

如果有人能告诉我如何在 jQuery 中执行此操作，我将不胜感激。并且请不要给我使用 jQuery 的静态 HTML 操作的链接，我想要一个针对动态 HTML 元素 的解决方案。

Answer 1

您好，我已经添加了对您有很大帮助的工作演示代码。

我在按钮上添加了一个点击事件，在事件 w.r 到按钮时，我搜索了元素的父 tr，从父 tr 我可以使用 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>