jamesyue 2022-10-18 16:43 采纳率: 83.3%
浏览 51
已结题

HTML表格上input列勾选求和

            <tr class="to_sum" style="height: 30px; font-size: smaller">
                <td>{{ user.0 }}</td>
                <td>{{ user.1 }}</td>
                <td style="text-align: right">{{ user.2 }}</td>
                <td style="text-align: right">{{ user.3|floatformat:2 }}</td>
                <td>{{ user.4 }}</td>
                <td style="text-align: right">{{ user.5|floatformat:2 }}</td>
                <td style="text-align: center">{{ user.6 }}</td>
                <td style="text-align: right">{{ user.7 }}</td>
                <td>{{ user.8 }}</td>
                <td><input type="text" name="tokill" class="killme" value="0" ></td>      ## 第9列手动输入数据
                <td><input type="checkbox" name="ckbox" class="box_ck" onclick="calculate()"></td>  # 勾选者求和
            </tr>


    <script>
        function calculate() {
          const ele = document.getElementsByClassName("box_ck");
          let table = document.getElementById("myTable");
          let tr = table.getElementsByClassName('to_sum');
          let subTotal = 0;
          for (var i = 0; i < ele.length; i++) {
            let td = tr[i].getElementsByTagName("td")[9].children ;      ## 问题可能出在这一行
            let price = parseFloat(td.innerText);
            if (ele[i].type == 'checkbox' && ele[i].checked == true)
              subTotal += price;
          }
          document.getElementById("val").innerHTML = "总计收款： " + subTotal;
        }
    </script>
  • 写回答

4条回答 默认 最新

  • 游一游走一走 2022-10-18 17:30
    关注

    img

    
<html>
<body>
<table id="myTable">
    <tr class="to_sum" style="height: 30px; font-size: smaller">
        <td>{{ user.0 }}</td>
        <td>{{ user.1 }}</td>
        <td style="text-align: right">{{ user.2 }}</td>
        <td style="text-align: right">{{ user.3|floatformat:2 }}</td>
        <td>{{ user.4 }}</td>
        <td style="text-align: right">{{ user.5|floatformat:2 }}</td>
        <td style="text-align: center">{{ user.6 }}</td>
        <td style="text-align: right">{{ user.7 }}</td>
        <td>{{ user.8 }}</td>
        <td><input type="text" name="tokill" class="killme" value="1"></td>
        ## 第9列手动输入数据
        <td><input type="checkbox" name="ckbox" class="box_ck" onclick="calculate()"></td>
        # 勾选者求和
    </tr>
    <tr class="to_sum" style="height: 30px; font-size: smaller">
        <td>{{ user.0 }}</td>
        <td>{{ user.1 }}</td>
        <td style="text-align: right">{{ user.2 }}</td>
        <td style="text-align: right">{{ user.3|floatformat:2 }}</td>
        <td>{{ user.4 }}</td>
        <td style="text-align: right">{{ user.5|floatformat:2 }}</td>
        <td style="text-align: center">{{ user.6 }}</td>
        <td style="text-align: right">{{ user.7 }}</td>
        <td>{{ user.8 }}</td>
        <td><input type="text" name="tokill" class="killme" value="2"></td>
        ## 第9列手动输入数据
        <td><input type="checkbox" name="ckbox" class="box_ck" onclick="calculate()"></td>
        # 勾选者求和
    </tr>
    <tr class="to_sum" style="height: 30px; font-size: smaller">
        <td>{{ user.0 }}</td>
        <td>{{ user.1 }}</td>
        <td style="text-align: right">{{ user.2 }}</td>
        <td style="text-align: right">{{ user.3|floatformat:2 }}</td>
        <td>{{ user.4 }}</td>
        <td style="text-align: right">{{ user.5|floatformat:2 }}</td>
        <td style="text-align: center">{{ user.6 }}</td>
        <td style="text-align: right">{{ user.7 }}</td>
        <td>{{ user.8 }}</td>
        <td><input type="text" name="tokill" class="killme" value="3"></td>
        ## 第9列手动输入数据
        <td><input type="checkbox" name="ckbox" class="box_ck" onclick="calculate()"></td>
        # 勾选者求和
    </tr>
</table>
<div id="val"></div>


<script>
    function calculate() {
        const ele = document.getElementsByClassName("box_ck");
        let table = document.getElementById("myTable");
        let tr = table.getElementsByClassName('to_sum');
        let subTotal = 0;
        for (var i = 0; i < ele.length; i++) {
            let td = tr[i].getElementsByTagName("td")[9];
            console.log(td.children[0].value)
            let price = parseFloat(td.children[0].value);
            if (ele[i].type == 'checkbox' && ele[i].checked == true)
                subTotal += price;
        }
        document.getElementById("val").innerHTML = "总计收款： " + subTotal;
    }
</script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 10月26日
  • 已采纳回答 10月18日
  • 赞助了问题酬金15元 10月18日
  • 创建了问题 10月18日

悬赏问题

  • ¥15 想问一下树莓派接上显示屏后出现如图所示画面，是什么问题导致的
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号