Untitled
plain_text
2 months ago
5.0 kB
2
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Product Form</title> <link rel="stylesheet" href="style.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./index.js"></script> </head> <body> <div class="table-container"> <table id="product-table"> <thead> <tr> <th>Product</th> <th>Description</th> <th>Quantity/Update</th> <th>Price</th> <th>Discount</th> <th>Tax</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td><img src="product1.jpg" alt="Product 1" /></td> <td>Description 1</td> <td> <input type="number" class="quantity" value="3" /> <button class="minus">-</button> <button class="plus">+</button> </td> <td class="price">10.00</td> <td><input type="number" class="discount" value="2" /></td> <td><input type="number" class="tax" value="1" /></td> <td class="total">27.00</td> </tr> <tr> <td><img src="product2.jpg" alt="Product 2" /></td> <td>Description 2</td> <td> <input type="number" class="quantity" value="2" /> <button class="minus">-</button> <button class="plus">+</button> </td> <td class="price">15.00</td> <td><input type="number" class="discount" value="1" /></td> <td><input type="number" class="tax" value="0.5" /></td> <td class="total">29.50</td> </tr> <tr> <td><img src="product3.jpg" alt="Product 3" /></td> <td>Description 3</td> <td> <input type="number" class="quantity" value="5" /> <button class="minus">-</button> <button class="plus">+</button> </td> <td class="price">20.00</td> <td><input type="number" class="discount" value="3" /></td> <td><input type="number" class="tax" value="1.5" /></td> <td class="total">97.50</td> </tr> </tbody> <tfoot> <tr> <td colspan="3"></td> <td id="total-price">45.00</td> <td id="total-discount">6.00</td> <td id="total-tax">3.00</td> <td id="grand-total">42.00</td> </tr> </tfoot> </table> </div> </body> </html> $(document).ready(function() { const products = $("#product-table tbody tr"); const totalPriceCell = $("#total-price"); const totalDiscountCell = $("#total-discount"); const totalTaxCell = $("#total-tax"); const grandTotalCell = $("#grand-total"); function updateRowTotal(row) { const quantity = parseFloat(row.find(".quantity").val()); const price = parseFloat(row.find(".price").text()); const discount = parseFloat(row.find(".discount").val()); const tax = Math.ceil(quantity * price * 0.125); const total = (quantity * price - discount - tax).toFixed(2); row.find(".total").text(total); row.find(".tax").val(tax); updateTotals(); } function updateTotals() { let total = 0; let totalDiscount = 0; let totalTax = 0; products.each(function() { const product = $(this); total += parseFloat(product.find(".total").text()); totalDiscount += parseFloat(product.find(".discount").val()); totalTax += parseFloat(product.find(".tax").val()); }); totalPriceCell.text(total.toFixed(2)); totalDiscountCell.text(totalDiscount.toFixed(2)); totalTaxCell.text(totalTax.toFixed(2)); grandTotalCell.text((total - totalDiscount + totalTax).toFixed(2)); } products.each(function() { const product = $(this); const minusButton = product.find(".minus"); const plusButton = product.find(".plus"); const quantityInput = product.find(".quantity"); const discountInput = product.find(".discount"); const taxInput = product.find(".tax"); minusButton.click(function() { if (quantityInput.val() > 1) { quantityInput.val(parseInt(quantityInput.val()) - 1); updateRowTotal(product); } }); plusButton.click(function() { quantityInput.val(parseInt(quantityInput.val()) + 1); updateRowTotal(product); }); quantityInput.change(function() { updateRowTotal(product); }); discountInput.change(function() { updateRowTotal(product); }); taxInput.change(function() { updateRowTotal(product); }); updateRowTotal(product); }); });