javascript 请帮助我,我希望我的总价更新时,我从我的购物车中删除一个项目[关闭]

qoefvg9y  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(216)

已关闭,此问题需要更focused。目前不接受答复。
**想改善这个问题吗?**更新问题,使其仅通过editing this post关注一个问题。

昨天关门了。
Improve this question

<section id="cart" class="section-p1">
            <table id="myTable" width="100%">
                <thead>
                <tr>
                    <td>Remove</td>
                    <td>Image</td>
                    <td>Product</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    
                </tr>
            </thead>
            <tbody class="cart-items">
                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="quantity"><input type="number" value="1"></td>
              
                </tr>

                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="cart-quantity-input"><input type="number" value="1"></td>
                    
                </tr>
                </tr>

                <tr clas="cart-row">
                    <td class="delete"><input type="button" value="&times;"  onclick="deleteRow(this)"></td>
                    <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td>
                    <td>Red Plain Sleeves shirt</td>
                    <td class="cart-price">$100</td>
                    <td class="cart-quantity-input"><input type="number" value="1"></td>
                    
                </tr>
            </tbody>
            </table>
        </section>

        <section id="cart-add">
            <div id="coupon">
                <h3>Apply Coupon</h3>
                <div>
                    <input type="text" placeholder="Enter your coupon">
                    <button class="normal">Apply</button>
                </div>
            </div>

            <div id="subtotal">
                <h3>Cart Total</h3>
                <table>
                    
                        <td>Shipping</td>
                        <td>Free</td>
                    </tr>
                    <tr>
                        <td><strong>Total</strong></td>
                        <td class="cart-total">$300.00</td>
                    </tr>
                </table>

这是我的HTML代码,我希望能够删除一个项目和总价更新。
function deleteRow(r){ var i = r.parentNode.parentNode.rowIndex;文档。getElementById(“myTable”)。return(i);}
请我试图使输入更新车总以及当我增加或减少与输入,任何帮助进来?

ni65a41a

ni65a41a1#

你的问题的解决方案是:

首先读取总价格删除**$符号,以便能够将其转换为数字,然后从中减去删除的项目价格,
要保留小数,您需要使用
toFixed(2)方法,
计算后,在总价中再次添加您的
$**符号
下面是如何做到这一点:

function deleteRow(r) {
  const cartTotalEl = document.querySelector('.cart-total');

  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  let sum = Number(cartTotalEl.textContent.replace('$','')) - Number(r.parentNode.parentNode.querySelector('.cart-price').textContent.replace('$',''))
  cartTotalEl.textContent = `$ ${sum.toFixed(2)}`
}
<section id="cart" class="section-p1">
    <table id="myTable" width="100%">
        <thead>
            <tr>
                <td>Remove</td>
                <td>Image</td>
                <td>Product</td>
                <td>Price</td>
                <td>Quantity</td>

            </tr>
        </thead>
        <tbody class="cart-items">
            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="quantity"><input type="number" value="1"></td>

            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>

            </tr>
            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>
            </tr>
        </tbody>
    </table>
</section>

<section id="cart-add">
    <div id="coupon">
        <h3>Apply Coupon</h3>
        <div>
            <input type="text" placeholder="Enter your coupon">
            <button class="normal">Apply</button>
        </div>
    </div>

    <div id="subtotal">
        <h3>Cart Total</h3>
        <table>

            <td>Shipping</td>
            <td>Free</td>
            </tr>
            <tr>
                <td><strong>Total</strong></td>
                <td class="cart-total">$300.00</td>
            </tr>
        </table>
    </div>

但是我不会硬编码的总价格,为更好的功能保持您的代码动态,所以如果你决定添加一个项目的价格应该更新以及

更好的方法:

const cartTotalEl = document.querySelector('.cart-total');
const pricesEls = document.querySelectorAll('.cart-price');
let totalPrice = 0;

pricesEls.forEach(priceEl => {
  totalPrice += Number(priceEl.textContent.replace('$',''))
});

cartTotalEl.textContent = `$ ${totalPrice.toFixed(2)}`;

function deleteRow(r) {

  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  totalPrice -= Number(r.parentNode.parentNode.querySelector('.cart-price').textContent.replace('$',''))
  cartTotalEl.textContent = `$ ${totalPrice.toFixed(2)}`
}
<section id="cart" class="section-p1">
    <table id="myTable" width="100%">
        <thead>
            <tr>
                <td>Remove</td>
                <td>Image</td>
                <td>Product</td>
                <td>Price</td>
                <td>Quantity</td>

            </tr>
        </thead>
        <tbody class="cart-items">
            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt3.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="quantity"><input type="number" value="1"></td>

            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt2.jpg" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>

            </tr>
            </tr>

            <tr clas="cart-row">
                <td class="delete"><input type="button" value="&times;" onclick="deleteRow(this)"></td>
                <td><img src="WEBpictures/ftpro shirt4.webp" alt=""></td>
                <td>Red Plain Sleeves shirt</td>
                <td class="cart-price">$100</td>
                <td class="cart-quantity-input"><input type="number" value="1"></td>
            </tr>
        </tbody>
    </table>
</section>

<section id="cart-add">
    <div id="coupon">
        <h3>Apply Coupon</h3>
        <div>
            <input type="text" placeholder="Enter your coupon">
            <button class="normal">Apply</button>
        </div>
    </div>

    <div id="subtotal">
        <h3>Cart Total</h3>
        <table>

            <td>Shipping</td>
            <td>Free</td>
            </tr>
            <tr>
                <td><strong>Total</strong></td>
                <td class="cart-total"></td>
            </tr>
        </table>
    </div>

相关问题