jQuery進貨單結算頁面的實現方法:
$(document).ready(function(){ // 計算總金額 let totalAmount = 0; $(".item-info").each(function(){ let quantity = Number($(this).find(".quantity").val()); let price = Number($(this).find(".price").text()); let amount = quantity * price; $(this).find(".amount").text(amount.toFixed(2)); totalAmount += amount; }); $("#total-amount").text(totalAmount.toFixed(2)); // 處理提交按鈕事件 $("#submit-btn").click(function(){ let supplier = $("#supplier").val(); let data = {supplier: supplier, items: []}; $(".item-info").each(function(){ let name = $(this).find(".item-name").text(); let quantity = Number($(this).find(".quantity").val()); let price = Number($(this).find(".price").text()); data.items.push({name: name, quantity: quantity, price: price}); }); // 發送POST請求 $.post("/api/checkout", data, function(response){ if(response.success){ alert("結算成功!"); } else{ alert("結算失敗:" + response.message); } }); }); });
上面的代碼實現了一個簡單的進貨單結算頁面,其中每個商品都有數量和單價,結算時按照數量和單價計算總金額,提交時將供應商和商品信息發送到后臺處理。
代碼中使用了jQuery的each函數遍歷每個商品,find函數查找相關元素,val函數獲取輸入框的值,text函數獲取元素的文本,toFixed函數保留兩位小數。提交按鈕通過click函數綁定一個事件處理函數,使用post函數發送POST請求,處理返回結果。整個頁面的結構可以根據實際需求自由修改。
上一篇css彈性變大變小
下一篇css引進otf并且壓縮