首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JavaScript在表中创建新行,使用innerHTML设置输入变量,但用户输入的值在提交时不会过帐

在使用JavaScript在表中创建新行时,可以使用innerHTML属性来设置输入变量,但是用户输入的值在提交时不会被保存的原因可能有多种。

一种可能的原因是没有正确处理表单的提交事件。在表单提交时,需要使用JavaScript监听表单的提交事件,并在事件处理程序中获取用户输入的值,并将其保存到服务器或其他持久化存储中。可以使用addEventListener方法来监听表单的提交事件,并在事件处理程序中执行保存操作。

另一种可能的原因是没有正确设置表单元素的name属性。在表单提交时,浏览器会将表单中所有具有name属性的表单元素的值一起提交到服务器。如果没有为输入元素设置name属性,那么用户输入的值就无法被提交保存。

此外,还需要确保表单的提交方式正确设置为POST或GET,并且目标URL正确指向服务器端的处理程序。

以下是一个示例代码,演示如何使用JavaScript在表中创建新行,并在提交时保存用户输入的值:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>表单示例</title>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td><input type="text" name="name"></td>
      <td><input type="text" name="age"></td>
    </tr>
  </table>
  <button onclick="addRow()">添加行</button>
  <button onclick="submitForm()">提交</button>

  <script>
    function addRow() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = "<input type='text' name='name'>";
      cell2.innerHTML = "<input type='text' name='age'>";
    }

    function submitForm() {
      var form = document.createElement("form");
      form.method = "POST";
      form.action = "save.php"; // 替换为服务器端保存数据的处理程序URL

      var table = document.getElementById("myTable");
      var rows = table.getElementsByTagName("tr");

      for (var i = 1; i < rows.length; i++) {
        var inputs = rows[i].getElementsByTagName("input");
        for (var j = 0; j < inputs.length; j++) {
          var input = inputs[j];
          var name = input.name;
          var value = input.value;

          var hiddenField = document.createElement("input");
          hiddenField.type = "hidden";
          hiddenField.name = name;
          hiddenField.value = value;
          form.appendChild(hiddenField);
        }
      }

      document.body.appendChild(form);
      form.submit();
    }
  </script>
</body>
</html>

在上述示例代码中,点击"添加行"按钮会在表格中添加一行,并在每个单元格中创建一个带有name属性的输入框。点击"提交"按钮会创建一个新的表单元素,将用户输入的值作为隐藏字段添加到表单中,并将表单提交到服务器端的处理程序(save.php)进行保存。

请注意,上述示例代码仅演示了如何使用JavaScript在表中创建新行并保存用户输入的值,实际应用中还需要根据具体需求进行适当的修改和完善。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于后端代码的总结_辐射4最强防具代码

当我们使用外部文件时,在HTML页面的script 标签的 “src” 属性中设置该 .js 文件: myScript.js文件 //外部js文件中不能有script标签,直接编写JavaScript脚本代码即可...可以通过将变量的值设置为 null 来清空变量。...HTML 元素 要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。...table.insertRow() 在表格中创建新行,并将行添加到rows集合中 table.deleteRow() 从表格即rows集合中删除指定行 tr.insertCell()) 在表格的行中创建新的单元格...();//创建了一个空行,在页面上看不出来 //给新创建的行添加列 var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格 var newTd2=newTr.insertCell

3.2K20

JavaScript基本入门教程

7)全局变量和局部变量 全局变量:可以在JavaScript所有脚本代码中使用。...局部变量:只能在方法中起作用,出了方法,就不起作用了,但是,有一点必须注意,那就是在方法中没有代码块的概念,也就是说,在方法的代码块中定义的局部变量,在整个方法中都是可以使用的,不限于在代码块中。...定义变量时使用var和不使用var的区别:如果使用var定义变量,那么程序会强制定义一个新的变量。...如果没有使用var定义变量,系统会优先在当前上下文中搜索是否存在这个变量,如果有,则对这个变量重新赋值,否则重新定义一个新的变量。 事件中的全局变量和局部变量:请看代码案例五。 代码案例一: 时不会产生数组越界,访问未赋值的数组元素的时候,该元素的值为undefined 2)全局函数 A.eval()函数:计算JavaScript字符串,并把它当做脚本代码来执行。

4.1K20
  • SAP最佳业务实践:FI–应收帐款(157)-3 F-37预付款

    4.3 F-37过帐预付款请求 预付款请求是一些不会影响余额表的备注项。在帐户分析、催款程序和付款程序中可将它们考虑在内。 使用备用统驭帐户19990501的特殊总帐事务 F 的定制已完成。...特别是在手动付款或手动分步过帐帐户对帐单时,将会按这种方式处理。 使用备用总帐帐户22030101(已收到的预付款)的特殊总帐事务 A 的定制设置已完成。...在 客户预付订金记帐 :抬头数据 屏幕上,进行以下输入: 字段名称 用户操作和值 注释 凭证日期 输入凭证日期 例如,当天日期 公司代码 1000 货币 CNY 参照 输入参考 选择在预付款请求中输入的参考...如果在过帐预付款时未事先过帐相关的预付款请求,则仅执行第 1 步和第 2 步。然后继续执行以下操作: 在第 3 步中选择 新凭证项,而不是 请求。 ? 1....凭证过帐在借方的银行帐户(客户收款),和在贷方含备用统驭帐户(已收到的预付款)的客户。系统自动在预付款中设置付款冻结。已过帐计算的税款。 如果在过帐过程中已选择,则请求已结算。

    2.8K40

    脚本语言知识总结.

    是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。...= name; // 保存name的值 到对象属性中 this.price = price; } // 基于类结构创建对象,使用new 关键字 var p1 = new Product("冰箱",1000...,当响应回来后,Ajax引擎会更新客户页面,在客户端提交请求后,用户可以继续操作,而无需等待 。...2.Ajax快速入门 ①:开发步骤 1).创建XMLHttpRequest对象 2).将状态触发器绑定到一个函数 3).使用open方法建立与服务器的连接 4).向服务器端发送数据 5).在回调函数中对返回数据进行处理...l 读取和设置某个元素中HTML内容 html() 读取innerHTML html(content) 设置innerHTML l 读取和设置某个元素中的文本内容 text() 读取文本内容 text

    5K130

    JavaScript学习笔记1

    ***基于对象:再js里面提供了一些对象,可以直接使用。 面向对象:在java里面先创建对象再使用。 ***事件驱动:js里面它触发事件,调用函数,实现网页里面的动态效果。...赋值运算符:+= -=等等 注意:var 1=10;var b=”0”; var c=a-b;在进行减法(乘除法)操作时,会把String类型的值,转换为number类型 6.条件语句: If,if...10"); } else { alert("other---"); } 1.3 javascript的使用 1.函数的定义和使用 在js里面定义函数三种方式...: 表单校验:1.用户输入的数据符合咱们定义的规范,允许用户提交表单,如果用户输入的数据不符合规范,不允许提交。...表单校验的知识点总结:1.错误信息:在一行显示,用他的innerHTML属性回显错误信息。

    1.7K40

    SAP最佳业务实践:FI–凭证分割(165)-2业务处理

    Segment 字段是新总帐会计核算(FAGLFLEXT) 总表中的标准字段,新FI 追踪报表功能允许您创建细分财务报表。 凭证拆分仅与总帐相关,它无需出现在子分类帐中。...如果使用凭证拆分,在过帐开始日期之前必须完成并更正其“自定义”。如果在以后激活凭证拆分,只有在处理非常复杂的迁移项目时才可进行(参见注释 891144)。...4 流程步骤 在线拆分是新增总帐会计中的一项功能,它不会产生自己的流程或单独的业务情景。以下步骤介绍了检查过帐的可能性。也可以检查此处未介绍的 ERP 标准报表中的拆分。...对于分割的凭证,在显示时可以选择带清帐行项目的总账视图,也可以选择不带清帐行项目的输入视图。SAP交付了标准的分割程序(12)和规则,基本能够满足大多数的业务需要。...在 显示凭证:初始屏幕上,输入下列数据: 字段名称 用户操作和值 注释 凭证编号 XXXXXXXXX 输入您早先记下的凭证编号。 公司代码 1000 会计年度 过帐凭证的年份> ? 2.

    3.4K62

    JS的常用操作

    一、使用 JS 完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样 会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台...2.5javascript 的变量 变量可以不用声明,变量是弱类型。统一使用 var 来定义!定义变量的时候不要使用关键字 和保留字。...:document.write(“”); 3.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据时需要在指定位置定义一个 id>) 第三步...:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交?...); 3.步骤分析 第一步:在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值) 第二步:确定事件(onload)并为其绑定一个函数 第三步:书写这个函数(设置一个显示图片的定时操作

    8.1K10

    SAP最佳业务实践:FI–总账(156)-5显示、对账

    在 简要凭证日记帐 屏幕上,进行以下输入: 字段名称 用户操作和值 注释 公司代码 1000 会计年度 例如:本年度 分类帐 0L 选择您感兴趣的分类帐;如果未输入任何内容,则会显示属于主分类帐的凭证...4.7 S_ALR_87012287显示凭证日记帐 凭证日记帐每个月创建一次,并且包含特殊凭证期间的所有凭证过帐。它可以在盖有官方公证印记的纸张上打印。...在 凭证日记帐屏幕上,进行以下输入: 字段名称 用户操作和值 注释 公司代码 1000 会计年度 例如:本年度 分类帐 0L 选择您感兴趣的分类帐;如果未输入任何内容,则会显示属于主分类帐的凭证...根据选择屏幕上输入的参数创建了一份清单。 打印每个凭证项目的过帐代码和适当位置的特殊总帐标识。...在 选择:总帐科目–余额 屏幕上,进行以下输入: 字段名称 用户操作和值 注释 一般选择 货币类型 10 公司代码货币 公司代码 1000 利润中心 如果需要,则选择已过帐的利润中心。

    3K80

    SAP最佳业务实践:FI–资产会计(162)-19定期处理-AFAB折旧过帐运行

    4.7.3 AFAB折旧过帐运行 起初过帐至固定资产会更改资产会计中的计划折旧。然而,资产负债表和损益表的累计折旧科目和折旧科目并不会立即更新。...系统按照定制中指定的过帐周期为每个折旧范围和科目组创建过帐凭证。对于过帐日期,系统使用 正常期间的期间最后一天(无特定期间) 特定期间的会计年度最后一天 在定制中已定义用于过帐折旧的凭证类型 AF。...在凭证类型的定制定义中,已使用内部编号分配指定编号范围03。 定制设置还指定在总帐中过帐折旧范围 01(账面折旧),15(税务折旧) 和20(成本会计折旧)中的折旧。...在 折旧记帐运行屏幕上,进行以下输入: 字段名称 用户操作和值 注释 公司代码 1000 财务年度 记帐期间 过帐期间> 按过帐周期的下一个期间 计划内记帐运行 激活 重复...字段名称 用户操作和值 注释 输出设备 输入 locl 使用本地打印机> 开始时间 立即启动该作业。 ? 4.

    3.7K70

    Web-第三天 JavaScript学习【悟空教程】

    第1章 案例:使用JS完成注册页面的校验 1.1 案例介绍 用户在提交表单时,需要对用户的填写的数据进行校验。...-8"> 1.2.2 基本语法 1.2.2.1 变量 1) 在使用JavaScript时,需要遵循以下命名规范: 必须以字母或下划线开头,中间可以是数字、字符或下划线 变量名不能包含空格等符号...2) 变量的声明 var 变量名; //JavaScript变量可以不声明,直接使用。...默认值:undefined 3) 变量的赋值 var 变量名 = 值; //JavaScript变量是弱类型,及同一个变量可以存放不同类型的数据 1.2.2.2 数据类型 【基本类型】 Undefined...点击确定获得用户输入数据 3.5.2 BOM :Location对象 href属性:设置或返回完整的 URL。 ?

    3.4K10

    JavaScript的使用前言

    注意JavaScript和Java并没有半毛钱关系,Java是编译执行的语言,也就是一次性把代码转换成cpu看得懂的语言,一行行执,而JavaScript是解释执行的语言,一行行的解析,解析一行执行一行...当用户点击"确定"按钮时,返回true当用户点击"取消"按钮时,返回false。...);//创建数组同时赋值 或者简写为: var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”) 注意js中数组长度是可变的,增加元素的个数,length...(2) 文本节点:向用户展示的内容,如...中的JavaScript、DOM、CSS等文本。     ...4、显示和隐藏(display): 我们在论坛或者贴吧下载别人分享的资源时,通常是要评论了以后才会显示下载链接,没评论就不会显示,这就是用到了display属性。

    2.6K20

    【前端基础篇】JavaScript之DOM介绍

    示例: let newDiv = document.createElement("div"); 说明: 该方法创建了一个新的 div 元素,但此时它还没有被添加到页面中,需要使用其他方法将其插入到 DOM...一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略. JavaScript中的常见DOM文档事件 1....; }); 解释: 当用户将鼠标悬停在ID为 hoverElement 的元素上时,控制台将打印一条消息。 5. submit submit 事件在表单提交时触发。...,触发 focus 事件;当用户点击其他地方离开输入框时,触发 blur 事件。...8. change change 事件在用户改变输入元素的值后触发,常用于 input、select、textarea 等表单元素。

    11710

    「原生案例」如何在JavaScript中实现实时搜索功能

    改进的用户体验:实时搜索通过提供无缝和直观的搜索过程显著提升了用户体验。当用户开始输入查询时,搜索结果会实时更新,提供即时反馈,消除了手动提交或页面刷新的需求。...在 try 块内,我们将删除 console.log(result) 行,并将 result 变量更改为先前声明的 movieList 变量,并将同一行中的 response.text() 更改为 response.json...filtered Movies 变量的值,来显示与用户在搜索栏中输入的字符匹配的电影标题的实时搜索结果。...简单来说,这就是说:“当前时间的值减去我们之前存储在缓存中的时间的值,是否大于我们设置的过期时间?如果是,就从API中重新获取电影数据;如果不是,就使用缓存的数据。”...按照所述步骤,您可以创建一个动态搜索体验,当用户在搜索栏中输入时,可以提供实时结果。 通过在您的网站上实现实时搜索功能,您可以增强用户参与度,提高您的网站或应用程序的可用性。

    1.3K40

    前端基础:HTML

    -- 注释不会在浏览器中显示 --> 标签 br 标签就是一个换行功能标签 标签 在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行 常用属性 align 的作用是设置段落中的内容对齐方式...当事件发生时,可以执行 JavaScript,比如发生用户点击一个 HTML 元素的事件。...如需在用户点击某个元素时执行代码,可以把 JavaScript 代码添加到 HTML 事件属性中:onclick=JavaScript HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图片已加载时...当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 在一个表单中有用户名录入的文本框,当输入完文本框的时候进行名称校验,提交的时候弹框显示 -->

    1.8K20

    JavaScript 简介,JS中调用输出中文乱码

    ; 字符串中含有 "e",所以该实例输出为: e JavaScript 调试工具 在程序代码中寻找错误叫做代码调试。 调试很难,但幸运的是,很多浏览器都内置了调试工具。...内置的调试工具可以开始或关闭,严重的错误信息会发送给用户。 有了调试工具,我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。...console.log() 方法 如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值: 设置断点 在调试窗口中,你可以设置 JavaScript...在每个断点上,都会停止执行 JavaScript 代码,以便于我们检查 JavaScript 变量的值。 在检查完毕后,可以重新执行代码(如播放按钮)。...debugger 关键字 debugger 关键字用于停止执行 JavaScript,并调用调试函数。 这个关键字与在调试工具中设置断点的效果是一样的。

    9310

    SAP最佳业务实践:FI–总账(156)-7周期性分录

    该凭证不会导致事务数字的更新。周期性分录程序使用该凭证以创建会计凭证。 如果您要使用该方法,您必须输入周期性分录凭证,系统将使用该凭证作为参考。周期性分录凭证不是会计凭证,因此它不会影响帐户指数。...在每次运行程序的过程中,每个周期性分录凭证只创建一个会计凭证,因此冗长的计算期间不会产生一个以上的会计凭证。...在输入周期性输入:抬头数据屏幕中,输入以下数据: 字段名称 用户操作和值 注释 公司代码 1000 公司代码 1000 周期性分录运行 首次运行日期 指定周期性分录凭证首次过帐的时间...如果您未分配单独的名称,那么程序将设置批次输入会话名称 SAPF120。 用户名 * 使用该参数,您可以自由选择用户。如果您未指定单独的用户 ID,那么用户程序将设置 SAPF120。 ?...在 处理会话 SAPF120(或您输入的参数)屏幕上,进行以下输入: 字段名称 用户操作和值 注释 仅显示错误 x 处理 x ? 系统在后台创建周期性凭证。 ?

    2.2K61

    再来利用java学学javaweb——–html+css+ JavaScript

    在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来 5. html的标签不区分大小写,但是建议使用小写。...* 表单项中的数据要想被提交:必须指定其name属性 ​ * 表单项标签: * input:可以通过type属性值,改变元素展示的样式 * type属性: * text:文本输入框,默认值...变量 * 变量:一小块存储数据的内存空间 * Java语言是强类型语言,而JavaScript是弱类型语言。 * 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。...只能存储固定类型的数据 * 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。...* 属性: * parentNode 返回节点的父节点。 * HTML DOM 1. 标签体的设置和获取:innerHTML 2. 使用html元素对象的属性 3.

    2.3K20

    Web安全攻防入门系列 | 跨站脚本攻击和防范技巧 | 只看这一篇文章就够了

    比如:用户留言,个人信息等2.5 XSS构造技巧2.5.1 利用字符编码在使用GB2312编码的网页上,script标签输出一个变量,提交输入的是 “;alert(/xss/)” 来实现xss攻击,使用...如果该cookie设置了HttpOnly,这种攻击就会失败,因为JavaScript取不到cookie的值。...这种输入检查方式可以称为“XSS Filter",互联网上很多开源的“XSS Filter"源码。XSS Filter在用户提交数据时获取变量,并进行xss检查。...所以XSS Filter对语境的理解并不完整,很可能改变用户原来的意思。3.3 输出检查一般来说出来富文本的输出外,在变量输出到html页面时,可以使用编码或者转义方式来防御xss攻击。...如果网站时MVC架构,那么XSS就发生在View层,在应用拼接变量到HTML页面时产生。所以在提交数据处进行输入检查的方案,其实并不是在真正发生攻击的地方做防御。

    2.1K50

    GPT3 探索指南(三)

    但我们实际上还没有创建一个完全可用的 app。那就是我们将要做的事情。在本章中,我们将构建一个简单但功能强大的 Web app,让用户提出问题,由 GPT-3 从我们提供的知识库中回答。...要创建一个新的 Node.js REPL 并设置 Express,请完成以下步骤: 在replit.com登录。 创建一个名为gptanswers-node的新 Node.js REPL。...创建一个名为gptanswers-node的新集合。 在 /answer 中创建一个名为 test-answer-api 的新请求。...点击小锁图标并创建一个名为ANSWERS_FILE的新秘密/环境变量,并将你在上一步中复制的 ID 值粘贴到值输入中,然后点击添加新的秘密按钮。...概要 在本章中,我们介绍了答案端点,并使用 Node.js/JavaScript 构建了一个简单但功能齐全的 Web 应用程序,可以从我们提供的文档中回答问题。

    9200
    领券