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

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条)

报告相同问题？

  • 2、编程基础与Excel/VBA入门指南
    2025-11-29 01:34
    grass的博客 本文介绍了编程的基础概念，包括程序的逻辑性、赋值操作、决策与循环结构，并结合Excel/VBA环境详细讲解了如何通过VBA宏实现数据处理与自动化。通过简单示例和实际应用，帮助初学者掌握从基本语法到与Excel交互的...
  • Python编程基础
    2021-10-29 17:09
    多鱼的夏天的博客 简单来说，Python是一门编程语言，帮助我们更好的与计算机沟通，功能全面、易学易用、可拓展语言，所以说，人生苦短，我学Python。 Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些...
  • matlab从无到有系列（九）：Simulink基础仿真详解（全网最全，从入门到放弃）
    2022-04-02 19:51
    左手の明天的博客 专栏：Matlab GUI编程技巧 专栏：Matlab从无到有系列 专栏：《数学建模》 大家好，我是左手の明天！ 最近更新：2022 年 4 月 2 日，左手の明天的第215 篇原创博客 往期必看 matlab从无到有系列（二）：...
  • Python基础——零基础学Python
    2020-09-22 13:48
    柏拉图工作室的博客 简单来说，Python是一门编程语言，帮助我们更好的与计算机沟通，功能全面、易学易用、可拓展语言，所以说，人生苦短，我学Python。 Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些...
  • Python机器学习：从入门到精通
    2025-07-18 17:01
    莲华君的博客 当您翻开此书，您正踏入一场数据与智慧的修行。机器学习，并非冰冷的符码，而是机器模拟人类洞察...愿您合上书卷时，收获的不仅是驾驭数据的技能，更有一双洞悉复杂、化繁为简的“智慧之眼”。现在，让我们一同启程。
  • Python入门
    2025-02-02 19:06
    Jia@贾的博客 Python是当今世界最流行的程序语言之一。由荷兰人，吉多·范罗苏姆（Guido van Rossum）1989年发明，1991年公布。我们也亲切的称他为龟叔。
  • JavaScript从入门到精通（全）
    2021-07-22 14:53
    码农研究僧的博客 运行在浏览器的脚本语言（目标程序以文本格式打开） 用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断 Java运行在JVM当中，JavaScript运行在浏览器的内存当中 完整的javascript由语言基础,BOM,...
  • Python开发：从入门到精通
    2025-07-16 08:45
    莲华君的博客 用 Python 以“道”驭“术”，将编程思想与实践应用相结合，引导读者不仅掌握Python语言，更能建立科学的编程世界观，最终达到知行合一的境界。
  • 【Python库和代码案例：第一课】Python 标准库与第三方库实战指南：从日期处理到 Excel 操作
    2025-12-16 10:17
    艾莉丝努力练剑的博客 一个编程语言能不能流行起来，一方面取决于语法是否简单方便容易学习，一方面取决于生态是否完备。实际开发中，也并非所有的代码都自己手写，而是要充分利用现成的库，简化开发过程。按照库的来源，可以大致分成两大...
  • 2024最新版Python视频教程木棉
    2024-10-17 13:10
    theo.wu的博客 简单 python的特点 ·是跨平台语言【可以运行在不同的操作系统上】 ·python是一种解释型语言【开发过程中没有了编译的环节】 ·开发过程中没有了编译这个环节，类似于PHP和Perl语言 ·python 是交互式语言 ·可以在...
  • 《R语言入门与数据分析》
    2021-07-06 18:24
    weixin_BeefpasteC的博客 **前言：这是根据 B站《R语言入门与数据分析》 自学整理的学习笔记。非科班出身，之前也没接触过代码，自己理解能力也比较差，所以会显得外行又笨拙，但还是希望多交流学习，才有动力持续进步。 目前这个课程笔记还...
  • Python基础第一周--Python语言家族
    2019-11-04 18:01
    宇航18611465354的博客 简单来说，Python是一门编程语言，帮助我们更好的与计算机沟通，功能全面、易学易用、可拓展语言，所以说，人生苦短，我学Python。 Python 的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的...
  • Python基础
    2024-07-31 09:35
    华夏灬指挥官的博客 概述 起源于1989年，发行于1991年，是一个免费、开源、跨平台、动态、面型对象的编程语言。 1.2.语言优势 简单高效：容易上手，开发效率比其它主流语言高1/3~1/5； 适应性广：Python语言不仅适合专业人员，也适合非...
  • 13、在 iPhone 上使用 OpenCV 进行人脸识别的有趣实践
    2025-10-26 01:53
    m0n1o2p的博客 本文详细介绍了在iPhone上使用OpenCV进行人脸识别的完整实践过程，涵盖环境配置、XCode项目搭建、图像格式转换、GUI设计、Haar级联分类器加载与人脸检测实现，并提供了性能优化策略和扩展功能建议，如人脸模糊、表情...
  • JavaScript笔记
    2024-12-20 17:19
    愿望研究所.的博客 QQ截图 ctrl+alt+A 不点击鼠标 拖到目标位置 按C取色 一、JavaScript基础 1.JavaScript JavaScript是一种运行在客户端的脚本语言，高级编程语言 脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行...
  • 熟悉Python从由浅入深（Python基础篇）
    2023-07-04 00:17
    ziwu1226的博客 我把它变成字符串放到占位的位置 当多个表变量占位，变量要用括号括起来，并按照占位符顺序填入 当然不仅仅只有%s可以使用，下列表格列出了 python 中常见%格式。 格式化符号 含义 %d 表示整数 %s 表示通过str()字符...
  • Python 机器学习 基础 之 学习 基础环境搭建
    2024-04-30 17:52
    仙魁XAN的博客 Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本...Python 机器学习是利用 Python 编程语言中的各种工具和库来实现机器学习算法和技术的过程。
  • R学习笔记：《R语言入门与数据分析》
    2020-11-04 17:32
    twocanis的博客 文章目录P1 课程介绍P2 数据分析P3 数据挖掘P4 数据可视化P5 R语言介绍R语言的特点R语言的缺点P6 案例演示P7 R软件的安装P8 R软件的运行与设置P9 Rstudio左上脚本窗口左下控制台窗口右上环境和历史记录窗口右下功能...
  • 前端面试题
    2021-11-17 09:29
    激起往昔的涟漪的博客 语法“$ (selector)”，作用是根据“ ()”里的参数进行查找和选择html文档中的元素。 2、圣杯布局、等高布局写法 // 圣杯布局 <style> .father{ padding: 0 300px 0 200px; } .son_left, .son_center, .
  • 史上最详细Django入门教程
    2021-10-27 10:31
    公子浪的博客 MVC的全拼为Model-View-Controller，最早由TrygveReenskaug在1978年提出，是施乐帕罗奥多研究中心(Xerox PARC)在20世纪80年代为程序语言Smalltalk发明的一种软件设计模式，是为了将传统的输入（input）、处理...
  • 没有解决我的问题, 去提问

问题事件

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