开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

删除函数时重新加载合计-基于HTML和JS的表单

是指在一个基于HTML和JS的表单中，当删除某个函数时，重新计算并加载合计的过程。

在一个表单中，通常会有多个输入框用于输入数据，而合计则是对这些输入框中的数据进行计算并显示结果。当用户删除某个函数时，可能会影响到合计的计算结果，因此需要重新加载合计。

实现这个功能的关键是通过JavaScript来监听删除函数的操作，并在删除函数后重新计算合计并更新显示。具体步骤如下：

在HTML中，为删除函数的按钮添加一个事件监听器，当按钮被点击时触发相应的JavaScript函数。
在JavaScript函数中，获取需要删除的函数所在的行或元素，并将其从表单中移除。
在JavaScript函数中，重新计算合计的值。根据表单中的其他输入框的值，使用适当的算法进行计算，并将结果保存到一个变量中。
在JavaScript函数中，将计算得到的合计值更新到合计的显示位置。可以通过修改HTML元素的内容或属性来实现。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>删除函数时重新加载合计</title>
  <script>
    function deleteFunction(rowId) {
      // 删除函数的操作
      var row = document.getElementById(rowId);
      row.parentNode.removeChild(row);

      // 重新计算合计
      var inputs = document.getElementsByClassName('input');
      var total = 0;
      for (var i = 0; i < inputs.length; i++) {
        total += parseFloat(inputs[i].value);
      }

      // 更新合计的显示
      document.getElementById('total').innerHTML = total;
    }
  </script>
</head>
<body>
  <table>
    <tr id="row1">
      <td>函数1：</td>
      <td><input type="number" class="input" value="10"></td>
      <td><button onclick="deleteFunction('row1')">删除</button></td>
    </tr>
    <tr id="row2">
      <td>函数2：</td>
      <td><input type="number" class="input" value="20"></td>
      <td><button onclick="deleteFunction('row2')">删除</button></td>
    </tr>
    <tr id="row3">
      <td>函数3：</td>
      <td><input type="number" class="input" value="30"></td>
      <td><button onclick="deleteFunction('row3')">删除</button></td>
    </tr>
  </table>

  <p>合计：<span id="total">60</span></p>
</body>
</html>

在上述示例代码中，我们使用了一个简单的表格来展示函数和对应的输入框，每个函数的删除按钮都绑定了相应的事件监听器。当点击删除按钮时，会调用deleteFunction函数来删除对应的函数行，并重新计算合计的值，并更新显示。

这个功能可以应用于各种需要动态计算合计的表单场景，例如购物车结算、订单金额计算等。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb-for-mysql
云存储（对象存储 COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动应用托管）：https://cloud.tencent.com/product/maap
区块链（腾讯区块链 BaaS）：https://cloud.tencent.com/product/tbaas
元宇宙（腾讯元宇宙）：https://cloud.tencent.com/product/tmu

相关搜索:用于在删除时重新加载的Jquery函数和ajax 当新的HTML元素加载到(js)中时，我如何重新定位HTML元素？PHP/ HTML :智能页面缓存(仅在后退和前进按钮单击时使用缓存的HTML，但强制页面在直接链接上重新加载)我有一个JS列表函数，它可以在使用内联脚本时工作，但不能在HTML和JS位于不同的文件中时工作金融风控管理方法消费金融风控案例金融风控系统价格金融风控是指什么山西消费金融风控湖南消费金融风控

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

BOM和DOM

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

01

【ChatGPT】JeecgBoot v3.6.3 AI版本发布，企业级低代码平台

01

【译】开始学习React - 概览和演示教程

当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？

02

好久不用 jQuery，来复习一下

jQuery 是一个优秀的 JavaScript 库，是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物：John Resig、Brandon Aaron 和 Jorn Zaefferer。 jQuery 凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。

04

一张图解析 FastAdmin 中的表格列表

该图片取自 fastadmin 问答区: https://ask.fastadmin.net/article/323.html

01

JS事件相关知识点整理

JS事件相关知识点整理 JS事件的驱动机制常见JS事件点击事件---onclick 焦点事件获取焦点事件---onfocus 失去焦点事件----onblur 域内容改变事件---onchange 加载完毕事件----onload 表单提交事件---onsubmit 键位弹起事件---onkeyup 常用鼠标事件鼠标移入事件----onmouseover 鼠标移出事件---onmouseout JS事件的两种绑定方式元素事件句柄绑定优缺点 DOM绑定方式示例演示优缺点 ----

02

JQuery基础

学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！ jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities（实用工具）很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6（不失为解决兼容性的一种方法）。

05

DOM 和 BOM

早起 JS操作不同浏览器的 API 没有标准，有严重兼容性问题，后来 W3C 制定了统一的操作网页内容的 API 标准 DOM，使用 DOM API 操作网页内容，几乎 100%兼容所有浏览器，它具有查找, 修改(内容,属性,样式), 添加, 删除的功能。

01

JavaWeb day3 JavaScript入门

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

02

JavaWeb day3 JavsScript 入门

==JavaScript 是一门跨平台、面向对象的脚本语言==，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

01

jQuery基础(五)一Ajax应用与常用插件-imooc

本章介绍jQuery中支持Ajax的各种方法和函数，阐述通过Ajax交互的过程与常用方法,重点介绍核心方法$.ajax()的运用技巧。通过ajax全局事件的介绍，进一步巩固前面所学基础内容。

02

javaWeb核心技术第五篇之jQuery

- 概述 - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可

01

layui弹窗间的传值（layui弹出层传值）(窗口传值)[通俗易懂]

主要有两部分 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 3、通过session互传 4、通过调用父窗口的函数从而获取到父窗口的值（相反也是可以的）

02

UIWebView 浏览器控件一、初始化与三种加载方式二、常用属性和方法三、代理方法 UIWebViewDelegate四、其它案例：

WebView的优缺点：优点：（1）跨平台（2）发布更新快（3）排版布局能力强缺点：（1）性能差（2）数据通讯复杂（3）耗费流量使用场景：（1）排版复杂的内容（2）需后台灵活控制的界面一、初始化与三种加载方式 UIWebView继承于UIView，因此，其初始化方法和一般的view一样，通过alloc和init进行初始化，其加载数据的方式有三种： 1.第一种： - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式，通过一

06

【Java 进阶篇】JavaScript 与 HTML 的结合方式

JavaScript是一种广泛应用于Web开发中的脚本语言，它与HTML（Hypertext Markup Language）结合使用，使开发人员能够创建交互式和动态的网页。在这篇博客中，我们将深入探讨JavaScript与HTML的结合方式，包括如何将JavaScript嵌入HTML、HTML事件处理、DOM操作以及常见的示例和最佳实践。

04

【领会要领】web前端-轻量级框架应用（jQuery基础）

jquery的安装和语法，jquery的多种选择器，dom操作和jquery事件。

02

js学习

2、由于JavaScript无需编译，是上到下执行的解释执行，所以在保证可读性的情况下，允许使用链式编程

01

JavaScript 事件基础补充

JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。一．事件介绍 JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。二．内联模型这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和HTML混写的，并没有与HTML分离。 //在HTML中把事件处理函数作为属性执行JS代码 <input type="button" va

05

WebAPIs学习笔记

作用：表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

03

2020最新前端面试题_2020年前端面试题

cookies、sessionStorage、localStorage的区别是什么？(浏览器)

01

探索 JQuery EasyUI：构建简单易用的前端页面

当我们站在网页开发的浩瀚世界中，眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中，JQuery EasyUI 如一位指路明灯，为我们提供了一条清晰的航线。

01

探索 JQuery EasyUI：构建简单易用的前端页面

当我们站在网页开发的浩瀚世界中，眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中，JQuery EasyUI 如一位指路明灯，为我们提供了一条清晰的航线。

01

Python全栈之jQuery笔记

jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套.

04

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

04

jQuery

jQuery本质上就是一个外部的js文件(jQuery.js)，该文件中封装了很多js代码,实现了很多功能。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more。 (写的更少,做的更多)。

02

JQuery Ztree 树插件配置与应用小结

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

04

【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界

在前端的世界里，事件是不可或缺的一部分。用户的点击、输入、滚动等行为都触发着各种事件，而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。本文将带你深入浅出，探索 JQuery 中的事件绑定，为你揭开这个奇妙世界的面纱。

01

Node.js 小打小闹之Excel解析

近期公司开始做绩效，某一天上午 HR 妹纸发了份 Excel 模板过来，让我下发给小组内成员填写。当天下午下班前，组内的绩效表就收齐了，接下来我就开始进入下一个环节，逐一打开每个 Excel 表为每个人打分。由于只有十几份绩效表，所以很快就打完分了。不过问题来了，虽然已经打完分了，但我对小组内成员的每个考核项得分和总分的情况却还是一片空白。想要一目了然，当然得简单做个统计报表咯。那么如何收集每个人的数据呢？当然最简单的方式就一个个打开组内成员的绩效表，然后一个个统计，不过对于这种方式，我是拒绝的。作为一个小小的程序猿，还是得施展一下雕虫小技 —— “自动提取数据”。

02

解决innerHtml 在Jquery上使用无效果的问题

**innerHTML是JavaScript原生的一种写法，给指定标签赋内容（并且若内容中有HTML标签，可以进行编译后显示，例：

01

Ajax.BeginForm()知多少

在ASP.NET MVC中，Ajax.BeginForm扮演着异步提交的重要角色。其中就有五个重载方法，但是在实际应用中，你未必使用的得心应手，今天我们就从主要的参数来一探究竟。 2799767-029d3a894fe5a11f.png 一、actionName 用于指定请求地址的Action名称。二、controllerName 用于指定请求地址的Controller名称。三、routeValues 用来传递参数，支持两种数据类型（两种传参方式）： object类型可以在使用时直接以匿名类方式声明，使

06

几个前端技术问题的解决思路

在这个页面中，第一个form表单，是开始就有了，第二个是点击按钮后动态添加的，它的判断是否为空是无效的。

02

Vue.js知识点整理

Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混用，适用于以数据操作为主的项目，无需依赖后端技术。下面是关于Vue.js的一些重要知识点整理：

01

jQuery学习笔记

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

03

异步加载的基本逻辑与浏览器抓包一般流程

本篇内容不涉及任何R语言或者Python代码实现，仅从异步加载的逻辑实现过程以及浏览器抓包分析的角度来给大家分享一下个人近期学习爬虫的一些心得。涉及到的工具有Chrome浏览器（开发者工具）、postman(一款非常优秀的Chrome网络请求构造工具，你可以在Chrome浏览器在线商店里搜到，也可以下载桌面版)。 1、异步加载概念及实现过程 2、浏览器抓包分析一般流程异步加载的英文简称是ajax,即“Asynchronous Javascript And XML”（异步JavaScript和XML）是指

04

【JS】JavaScript 基础入门

theme: healer-readable highlight: a11y-dark

03

一个合格的初级前端工程师需要掌握的模块笔记

<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

01

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

02

什么是jQuery？

Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

07

javascript常用技巧

map() (映射)方法最后生成一个新数组，不改变原始数组的值。其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

02

全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

大家好！我是你们的老朋友Java学术趴，今天继续给大家分享jQuery的相关知识。jQuery 底层 AJAX 实现。简单易用的高层实现 .get,.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。话不多说，接下来详细给大家介绍jQuery核心知识。

01

【前端基础】javascript笔记

浏览器在加载显示一个网页时，会对页面html代码解析，并在内存中创建一个描述该页面的模型（树形结构）。

01

前端之BOM和DOM

BOM(Browser Object Model)浏览器对象模型，它使得JS能够与浏览器进行‘对话’（交互，通过JS对页面内容进行操作）。

03

前端面试题1（HTML篇）

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

01

ASP.NET MVC编程——视图

1Razon语法使用@符号后接C#或VB.NET语句的方式。基本规则 1）变量 @后直接变量即可 2）代码块为使用表达式或多行代码，@后跟大括号将多行代码包括在大括号中 3）“+” 对于加号连接的两个字符串变量或属性，使用小括号将他们括起来 4）插入HTML或文字每一行前面加上“@：” 5）使用注释使用@*和*@将要注释的部分包起来 6）用@@在页面上显示@ @using 在一个View中引入此页所需程序集的命名空间。还可以在web.config中配置命名空间，不过将对所有的View起作用。 <

JQuery最全常用方法指南

ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error one(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

03

JavaWeb Day11 Vue快速入门

我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。

05

angularjs中常用的ng指令介绍【转载】

原文：http://www.cnblogs.com/lvdabao/p/3379659.html

03

框架究竟解决了啥问题？我们可以脱离它们吗？

大家好，我是 ConardLi，相信各位在 Web 开发的工作中已经离不开框架了，不知道有多少同学还用原生 JS 写代码呢？你有认真思考过框架究竟为我们解决了什么样的问题吗？脱离了这些框架，我们可以解决这些问题吗？我们来看看今天的文章：

03

JavaScript学习笔记（四）—— jQuery入门

子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类：

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭