2301_78200098 2023-12-02 23:07 采纳率: 0%
浏览 2

如何将tr中的小计金额获取到加到应付总额

谁能帮我实现一下下面加起来的那个应付总额啊（两个小计的功能已经实现）



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border:1px dashed #ccc;
        }
        table tr td{
            border:1px dashed #ccc;
        }
        table td.cal span{
            font:bold 25px 黑体;
            color:orange;
        }
        .cal{
            float:right;
        }
        table .btn{
            border:1px solid #dedede;
            background-color: white;
            width:16px;
            height:16px;
        }
        table .txt{
            width:60px;
            height:30px;
            border:1px solid #dedede;
            text-align: center;
            font:bold 15px 黑体;
        }
        table .txt:hover{
            border:1px solid red;
        } 
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
       $(function(){
        // 添加按钮 添加数量
         $(".btnAdd").click(function(){
            //获取文本框
            var txtval=$(this).siblings("input[type='text']");
            //获取文本框的数字
            var number=parseInt(txtval.val());
            //将文本框中的数字+1再赋值给文本框
            txtval.val(number+1);

            calPrice($(this),number+1);
         });
        //  减少按钮 减少数量
         $(".btnMinus").click(function(){
            //获取文本框
            var txtval=$(this).siblings("input[type='text']");
            //获取文本框的数字
            var number=parseInt(txtval.val());
            //将文本框中的数字-1再赋值给文本框
            if(number>1){
                txtval.val(number-1);
            }
            calPrice($(this),number-1);
         });
        // 计算小计 $btnObj增加、减少数量的按钮 number是商品的数量
        function calPrice($btnObj,number){
            // 获取td单元格中显示的单价
            var $tdObj=$btnObj.parent().next();
            // 获取价格
            var price=parseFloat($tdObj.text().substr(1));
            // 获取小计的单元格
            var $tdTotal=$tdObj.next();
            // 计算小计
            var total=price*number;
            $tdTotal.html("&yen;"+total.toFixed(2));      
        }
       });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>项目</td>
            <td>状态</td>
            <td>类型/数量</td>
            <td>单价</td>
            <td>小计</td>
        </tr>
        <tr>
            <td class="item">
                <a href="#">
                  <img src="images/item1.jpg" alt="">欢乐空间量贩式KTV:欢唱套餐2选1,国家法定节假日需到店另付20元,可升级
                </a>
            </td>
            <td>可购买</td>
            <td>
                <input type="button" value="-" class="btnMinus">
                <input type="text" name="" id="" value="1" disabled="disabled" class="txt">
                <input type="button" value="+" class="btnAdd">
            </td>
            <td>&yen;39.9</td>
            <td title="price">&yen;39.9</td>
        </tr>
        <tr>
            <td class="item">
                <a href="#">
                    <img src="images/item2.jpg" alt="">途乐时尚主题量贩式KTV:任选1小时欢唱,可升级,提供免费WIFI
                </a>
            </td>
            <td>可购买</td>
            <td>
                <input type="button" value="-" class="btnMinus">
                <input type="text" name="" id="" value="1" disabled="disabled" class="txt">
                <input type="button" value="+" class="btnAdd">
            </td>
            <td>&yen;59.9</td>
            <td title="price">&yen;59.9</td>
        </tr>
        <tr>
            <td colspan="5" class="cal">
                已选<span>2</span>件商品 应付总额<span id="spanTotal">&yen;59.9</span>
            </td>        
        </tr>
    </table>
</body>
</html>

img

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-12-03 10:19
    关注

    【以下回答由 GPT 生成】

    问题的提示中有一段 HTML 代码，在其中我们可以看到一个表格：

    <table>
    <tr>
        <td>Item 1</td>
        <td class="cal"><span>Subtotal: $10</span></td>
    </tr>
    <tr>
        <td>Item 2</td>
        <td class="cal"><span>Subtotal: $15</span></td>
    </tr>
    <tr>
        <td>Item 3</td>
        <td class="cal"><span>Subtotal: $20</span></td>
    </tr>
    <tr>
        <td>Total Payable:</td>
        <td class="cal"><span>Total: ???</span></td>
    </tr>
</table>

    在这个表格中，每一行都有一个 <td> 元素来展示商品的名称和小计金额，小计金额的格式为 Subtotal: $x，其中 x 是商品对应的金额。最后一行的 <td> 元素中有一个 <span> 元素显示 Total: ???，我们需要在这个元素中显示所有商品小计金额的总和。

    我们需要在 JavaScript 中实现一个功能，计算所有小计金额的总和，并设置到相应的元素中。

    解决方案如下：

    1. 首先，我们需要找到包含小计金额的所有 <td> 元素，并提取出金额。
    // 获取包含小计金额的所有<td>元素
const subtotalTds = document.querySelectorAll('.cal span');

// 创建一个空数组来存放所有小计金额
const subtotals = [];

// 遍历所有<td>元素，提取出金额
subtotalTds.forEach(td => {
    // 获取文本内容，例如 "Subtotal: $10"
    const text = td.textContent;

    // 从文本内容中提取出金额部分，例如 "$10"
    const amountText = text.split(':')[1].trim();

    // 去掉金额中的"$"符号，转换为数字类型
    const amount = parseFloat(amountText.slice(1));

    // 将提取出的金额添加到数组中
    subtotals.push(amount);
});
    1. 使用 reduce 方法计算小计金额的总和。
    // 使用reduce方法计算小计金额的总和
const total = subtotals.reduce((sum, amount) => sum + amount, 0);
    1. 将计算出的总和设置到相应的元素中。
    // 获取包含总金额的<td>元素
const totalTd = document.querySelector('td.cal span');

// 将计算出的总和设置到元素中
totalTd.textContent = `Total: $${total}`;

    下面是完整的代码：

    // 获取包含小计金额的所有<td>元素
const subtotalTds = document.querySelectorAll('.cal span');

// 创建一个空数组来存放所有小计金额
const subtotals = [];

// 遍历所有<td>元素，提取出金额
subtotalTds.forEach(td => {
    // 获取文本内容，例如 "Subtotal: $10"
    const text = td.textContent;

    // 从文本内容中提取出金额部分，例如 "$10"
    const amountText = text.split(':')[1].trim();

    // 去掉金额中的"$"符号，转换为数字类型
    const amount = parseFloat(amountText.slice(1));

    // 将提取出的金额添加到数组中
    subtotals.push(amount);
});

// 使用reduce方法计算小计金额的总和
const total = subtotals.reduce((sum, amount) => sum + amount, 0);

// 获取包含总金额的<td>元素
const totalTd = document.querySelector('td.cal span');

// 将计算出的总和设置到元素中
totalTd.textContent = `Total: $${total}`;

    这样，我们就实现了将小计金额加到总 payable 金额上的功能。



    【相关推荐】



    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 12月2日

悬赏问题

  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信，通信过程是如何？
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时，如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
  • ¥15 请各位帮我看看是哪里出了问题
  • ¥15 vs2019的js智能提示
  • ¥15 关于#开发语言#的问题：FDTD建模问题图中代码没有报错，但是模型却变透明了
  • ¥15 uniapp的h5项目写一个抽奖动画