【发布时间】：2017-02-14 03:53:27
【问题描述】：
我正在开发 POS 应用程序，我在搜索条形码后检索产品（保存在产品表中的数据库中），有添加购物车按钮，我单击该按钮将在订单表中添加产品详细信息、价格和数量数据库，添加到数据库后会显示，如果我输入相同的产品，那么它的价格和数量应该增加。
当我单击同一产品的添加购物车时，它正在从数据库中检索具有更新数量和价格的记录，但它正在添加新行而不是更新现有行（因为追加）有没有其他方法可以创建表这样每次我都不必追加新行。
$(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>
【问题讨论】：
-
我建议您在进行 ajax 调用之前先创建表。然后将唯一 id (uuid) 关联到数据库中的每个产品。然后在您的表格中，每一行都有一个与产品自己的 uuid 匹配的 id。在您的成功方法中，首先尝试获取 $(#uuid) ：如果它返回一些东西，则表示您之前已经购买过该产品，只需获取数量单元格（您可以通过在数量 td 上放置名称属性来做到这一点） ，否则只需像今天一样创建一个新行。（但在 tr 上使用 id=uuid 属性，在 qty td 上使用 name="qtyCell"。）
-
我希望只有当有人点击添加购物车按钮时才创建表格
-
为什么在你的成功函数中使用 $.each ？您的服务器在 POST 调用返回响应中放入了什么？
-
$.each 用于迭代服务器的响应以打印表格并从服务器返回订单详细信息
-
在 jQuery 中使用 Kendo UI？对于所有这些类型的问题，它都是免费且经过实战考验的。
标签： javascript jquery ajax spring-mvc