如何使用jquery操作HTML元素？

时间：2016-02-15 11:27:26

标签： jquery html database dom

我从数据库加载此表，因此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但由于每一行都有相同的属性而无法解决问题我无法选择特定行并更新其内容以使其正常工作。

我搜索了很多，但我找到的只是基于id和类选择器的HTML操作，我不能使用，因为每行的元素都有相同的类，我不能给每个元素赋予唯一的id，因为它们是从数据库（PHP）。

如果有人能在jQuery告诉我如何做到这一点，我真的很感激。请不要使用HTML向我提供静态jQuery操作的链接。我想要一个动态HTML elements的解决方案。

5 个答案:

答案 0 :(得分：1)

您好我已经添加了可以帮助您的工作演示代码。

我在按钮上添加了一个click事件，在事件w.r中添加了一个按钮，我搜索了元素的父tr，从父tr我可以用jquery方法找到那个tr里面的所有东西。

查看代码并明确地了解它会对您有所帮助

＆＃13;
＆＃13; 
$(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.");
  });


});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您好我添加了可以帮助您的演示代码。并且对于每个新的td，您需要输入包含产品ID及其名称的类型，并且应该隐藏它。通过获取产品ID和名称，您可以更新和删除相同的产品。

注意：如果您正在访问数据表单数据库，您将获得产品ID及其名称，您可以将这些值分别传递给输入标记，如上所述。

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

答案 2 :(得分：0)

为什么不使用基于类的jQuery选择？你是否意味着只改变一些元素的属性，而不是全班？

如果您决定不能使用基于类的jQuery选择，则可以使用jQuery更改类，这非常简单：

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

答案 3 :(得分：0)

更新：以下是工作示例：Fiddle example 代码是：

POST _msearch?pretty=1 
{"myIndex":"Product"}
{
  "fields": [
      "id",
    "Name"
  ], 
"query": {
 "bool": {
      "should": [
        {
          "query_string": {
            "default_field": "_all",
            "query": "key"
          }
        }
      ] 
    }      

  }
,
  "from": 0,
  "size": 5,
  "sort": [],
  "aggs": {}
}
{"myIndex":"Printer"}{
  "fields": [
      "id",
    "Name"  
  ], 
"query": {
 "bool": { 
      "must": [{
      "has_child": {
     "type": "Printer",
     "query": {
        "match": {
        "Name": "key"
        }
      }
    }
      }]
    }      

  }
,
  "from": 0,
  "size": 5,
  "sort": [],
  "aggs": {}
}

答案 4 :(得分：0)

这是我从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>

相关问题
最新问题