Question

我正在开发POS应用程序，我在搜索条形码后检索产品（保存在产品表中的数据库中），添加购物车按钮，我点击将在订单表中添加产品详细信息，价格和数量数据库并在添加到数据库后显示，如果我输入相同的产品，那么它的价格和数量应该增加。

当我点击为同一产品添加购物车时，它会使用更新的数量和价格从数据库中检索记录但是它添加新行而不是更新现有行（因为追加）是否有任何我可以创建一个表格的其他方式，这样每次我都不必添加新行。

jquery代码是

$(document).ready(function(){

$("#submit").click(function(event){
    var barcode=$(this).closest("tr").find("td:nth-child(1)").text();
    var product=$(this).closest("tr").find("td:nth-child(2)").text();
    var price=$(this).closest("tr").find("td:nth-child(3)").text();
    var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1}


    console.log(orderid);
    $.ajax({
        type:'POST',    
        url:'/pos/addproduct',
        dataType: "json",
        data:JSON.stringify(order),
        contentType: "application/json; charset=utf-8",
        success:
            function(data){

            $.each(data,function(index,value){

                var row=$("<tr><td>"+value.oid+"</td>"+"<td>"+value.pname+"</td>"+
                        "<td>"+value.qty+"</td>"+"<td>"+value.price+"</td>"+"<td>"
                        +value.barcodeid+"</td></tr>");
                $("#order").append(row).removeClass("hidden");

            })

        }
    })
});
})

，订单表是

<table id="order" class="hidden" align="center">
<tr>
<th>OrderId</th>
<th>ProductName</th>
<th>Quantity</th>
<th>Price</th>
<th>Barcode</th>
</tr>
<tr >
</table>

Answer 1

我首先假设您从服务器回答的是一个json对象，它给出了orderId（对于购物车来说是唯一的，即它不会改变会话范围），然后对于所需的已添加产品： - 它的产品名称 - 此产品订单的总价格（即单价*数量） - 数量 - 条形码

我创建了一个jsfiddle来向您展示我的想法：example

除了

之外，它的工作方式与您自己的代码完全相同

很明显，因为我没有你的服务器，我使用了jsfiddle AJAX服务来返回我认为你的服务器在POST请求时返回的内容
因此，服务器端数据通过orderId的两个全局变量和有序数量（对于每个产品，这就是它为对象的原因）进行处理。
在成功函数中，我寻找匹配“qty +条形码”的单元格（td），如果我找到它，我更新它和总价格单元格（其ID是“价格”+条形码）。如果我找不到它，我会在为数量和价格单元格设置适当的ID时创建行（这是您的代码）。

SO中的以下代码段不起作用（因为没有AJAX服务）请在上面的jsfiddle链接中运行

var qty={};
var orderId = 12;
$(document).ready(function() {

  $("a[id^=submit]").click(function(event){
    var barcode=$(this).closest("tr").find("td:nth-child(1)").text();
    var product=$(this).closest("tr").find("td:nth-child(2)").text();
    var price=$(this).closest("tr").find("td:nth-child(3)").text();
    var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1}

    if (qty.hasOwnProperty(barcode)) {
      qty[barcode]++;
      qty[barcode] = 1;
    }
    $.ajax({
      type:'POST',    
      url:'/echo/json/',
      dataType: "json",
      data://JSON.stringify(order),
      {
        json: JSON.stringify({
          oid: orderId,
          pname: product,
          price: parseFloat(price)*qty[barcode],
          qty:qty[barcode],
          barcodeid:barcode
        }),
        delay: 1
      },
      contentType: "application/json; charset=utf-8",
      success:function(data) {
          value = data
          var qtyItm = $("#qty"+value.barcodeid);
          if (qtyItm.length) {
            qtyItm.html(qty[barcode]);
            $("#price"+value.barcodeid).html(value.price);
          } else {
            var row=$("<tr><td>"+value.oid+"</td>"+"<td>"+value.pname+"</td>"+
              "<td id=\"qty"+value.barcodeid+"\">"+value.qty+"</td>"+
              "<td id=\"price"+value.barcodeid+"\">"+value.price+"</td>"+
              "<td>"+value.barcodeid+"</td></tr>");
            $("#order").append(row).removeClass("hidden");
          }
        },
      fail:function() {
          alert('problem')
      }
    })
  });
});

table {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <table align="center">
    <tr><th>Barcode</th><th>ProductName</th><th>Price</th><th>ADD</th></tr>
    <tr><td>97</td><td>johson</td><td>44.0</td><td><a href="#" id="submit97">Add</a></td></tr>
    <tr><td>98</td><td>another product</td><td>10.0</td><td><a href="#" id="submit98">Add</a></td></tr>
  </table>

  <table id="order" align="center">
    <tr><th>OrderId</th><th>ProductName</th><th>Quantity</th><th>Price</th><th>Barcode</th></tr>
  </table>

</body>

Answer 2

简单的解决方案是将整个表创建为JS，而不会中断代码..

JS Code ---

    $(document).ready(function(){

    $("#submit").click(function(event){
        var barcode=$(this).closest("tr").find("td:nth-child(1)").text();
        var product=$(this).closest("tr").find("td:nth-child(2)").text();
        var price=$(this).closest("tr").find("td:nth-child(3)").text();
        var order={"barcodeid":barcode,"pname":product,"price":price,"qty":1}


        console.log(orderid);
        var TableData = "";


         $.ajax({
                type:'POST',    
                url:'/pos/addproduct',
                dataType: "json",
                data:JSON.stringify(order),
                contentType: "application/json; charset=utf-8",
                success:
                    function(data){
TableData = TableData + '<table id="order"  align="center">'
        TableData = TableData + '<tr>';
        TableData = TableData + '<th>OrderId</th>';
        TableData = TableData + '<th>ProductName</th>';
        TableData = TableData + '<th>Quantity</th>';
        TableData = TableData + '<th>Price</th>';
        TableData = TableData + '<th>Barcode</th>';
        TableData = TableData + '</tr>';
                    $.each(data,function(index,value){
                        TableData = TableData + "<tr><td>"+value.oid+"</td><td>"+value.pname+"</td>";
                        TableData = TableData + "<td>"+value.qty+"</td>"+"<td>"+value.price+"</td>";
                        TableData = TableData + "<td>"+value.barcodeid+"</td></tr>";
                    })
 TableData = TableData + '</table>'
                }
            });


        $("#OrderDiv").html("");
        $("#OrderDiv").html(TableData);
});
})

和On HTML Replace

<table id="order" class="hidden" align="center">
<tr>
<th>OrderId</th>
<th>ProductName</th>
<th>Quantity</th>
<th>Price</th>
<th>Barcode</th>
</tr>
<tr >
</table>

使用

<div id = 'OrderDiv'> </div>

在成功请求后应用必要的CSS。

Answer 3

我遍历数据库中的所有对象并检查id是否与价格和条形码相同（如果相同）使用div元素更新价格和数量

    function(data){
            $.each(data,function(index,value){
                var temp = "qty" + data[index].barcodeid.trim();
                var qtyitm=$("#"+temp);
                if(qtyitm.length != 0){
                    qtyitm.html(data[index].qty);
                    //("#price"+(data[index].barcodeid.trim())).html(data[index].price);
                    temp = "price" + data[index].barcodeid.trim();
                    qtyitm = $("#"+temp);
                    qtyitm.html(data[index].price);
                }
                else{
                    var row=$("<tr><td>"+data[index].oid+"</td>"+"<td>"+data[index].pname.trim()+
                            "</td>"+
                            "<td id=\"qty"+data[index].barcodeid.trim()+"\">"+data[index].qty+"</td>"+
                            "<td id=\"price"+data[index].barcodeid.trim()+"\">"+data[index].price+"</td>"+
                            "<td>"
                            +data[index].barcodeid.trim()+"</td></tr>");

                    $("#order").append(row).removeClass("hidden");
                    }
            })

        }

如何使用jquery和ajax插入相同的记录时更新表

3 个答案: