无刷新增加表单行

最新推荐文章于 2021-08-06 21:32:47 发布
最新推荐文章于 2021-08-06 21:32:47 发布
阅读量125 收藏
点赞数
分类专栏： HTML及JS 文章标签： JavaScript HTML ViewUI

效果如图：

代码如下： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

	function addattachfrom() {

		var newnode = document.getElementById('attachSrc').firstChild.cloneNode(true);

		document.getElementById('attachDest').appendChild(newnode);

	}

	function removeattachfrom() {

		var dest = document.getElementById('attachDest');

		dest.childNodes.length >= 1 && dest.lastChild ? dest.removeChild(dest.lastChild) : 0;

	}

  //-->

  </SCRIPT>

 </HEAD>



 <BODY>

 提示：点击[+]可以增加表单，点击[-]可以减少表单

  <table width="90%" align="center" cellpadding="0" cellspacing="0" class="celltable">

	  <tbody id="attachSrc">

		<tr><td width="100%">

			<table class="gray" border="0" cellspacing="2" cellpadding="2" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;border-top:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;">

				<tr>

					<td width="20%" align="right">名称</td>

					<td width="80%" align="left">

						<input type="text" name="GoodsName"/></td>

				</tr>

			</table>

		</td></tr>

	  </tbody>

	  <tbody id="attachDest"></tbody>

  </table><br />

  <a href="#add" οnclick="addattachfrom();"> [+]</a>

  <a href="#remove" οnclick="removeattachfrom();">[-]</a>

 </BODY>

</HTML>
iteye_2404
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
运用jQuery实现的Ajax无刷新删除和添加数据的表单
05-18
摘要:脚本资源,Ajax/JavaScript,Ajax,无刷新　　运用jQuery实现的Ajax无刷新删除和添加数据的表单，可适时删除表格、修改表格内容、添加内容，实现了前端的功能，当然如果需要全部实现，则需要后台脚本语言的支持。---DOM载入就绪可以查询及操纵时执行该操作|等同window.load，确保在body元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。 　　用到了一个JS脚本库，主要就是设置各个验证项的正则表达式，基本技巧，判断位数，过滤和转换正则表达式，支持预定义正则和表达式两种，预定义正则参考RegNames数组等，脚本库中有很
jQuery实现form表单基于ajax无刷新提交方法详解
10-23
主要介绍了jQuery实现form表单基于ajax无刷新提交方法,结合实例形式分析了jQuery使用$.ajax()方法实现无刷新提交的详细步骤与实现技巧,并附带了一个较为完整的实例供大家参考,需要的朋友可以参考下
如何在表单页面中自动添加行
fengzhishangsky的专栏
01-07 970
一个表单中用一个N*M表格，表格的行后面有个add按钮可以实现自动添加行，行的后面和上文一样有add按钮，用append方法实现
表单新增行和新增列功能
xiaozaq的博客
11-27 394
暂时只实现了在行尾新增行和列尾新增列功能。之后有时间再完善在指定行和列后新增。 点击进入演示页面 点击查看源码
ajax表单不刷新页面,如何让jQuery表单提交不刷新页面，而是添加内容 - AJAX如？...
weixin_36084613的博客
08-06 286
在我的$('#my_form').submit(function()我有一个代码，应该从my_form窗体中添加一些选定歌曲的更多信息。我希望它能够在每个表单提交中更改info_table的内容(如果标记了不同的歌曲)。我怎样才能做到这一点 ？如果我离开return false;，那么该页面将不会重新加载。如何让jQuery表单提交不刷新页面，而是添加内容 - AJAX如？var my_xml;$...
cad快捷命令表[定义].pdf
10-11
这份“左手键”快捷命令表详细列出了AutoCAD中的一些核心功能，旨在帮助用户快速操作和执行命令。 1. **A** - 创建圆弧：使用此命令可以快速绘制圆弧，适用于需要不完整圆形的图形设计。 2. **AD** - ATTEDIT：用于...
提高MySQL中数据装载效率
12-15
在表无索引时装载比索引后装载更快。如果有索引，不仅必须增加记录到数据文件，而且还要修改每个索引以反映增加了的新记录。 较短的SQL 语句比较长的SQL 语句要快，因为它们涉及服务器方的分析较少，而且还因为将...
android表格控件源码
07-14
- 开发者可以自由设定列数，这意味着在运行时可以动态地增加或减少列，适应不同的数据结构和应用场景。这可能涉及到对数据模型和视图的同步更新。 6. **动态添加列**： - 控件支持在运行时动态添加新的列。这对于...
jQuery实现表单动态添加数据并提交的方法
10-18
主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下
java连接数据库课程设计(1).doc
01-08
删除功能，可以单行删除也可以多行删除 " "首先单行删除，选中一行后点击删除按钮就可以删除此条记录，而且数据库也相" "应地删除了此条记录，通过点击刷新再重新读取数据库数据可以证明 " " " "删除前 " " " " " ...
正式商业旗舰版Modoer点评系统3.5(Modoer 3.5)新增手机WEB端加微信公众平台接口,商业模块
03-11
7.新增加了ajax分页加载插件，很多之前需要进行翻页的列表页面都进行了改进，都实现了ajax无刷新加载下一页内容的 效果，也符合手机里查看数据的习惯 8.主题筛选进行了改进，这次终于可以进行三级分类和地区的筛选...
29.vue 实现动态表单，点击新增 增加一行输入框
weixin_47254130的博客
07-20 4607
存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行 1.动态表单部分 2.data部分 3.方法 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px"> <div v-for="(item, index) in form.dynamicItem" :key="index">
jQuery 点击按钮，表格增加一行。
孤峰忆霜的博客
03-27 2万+
添加一行 姓名年龄性别 function addrow(){ var tables = $('.table'); var addtr = $(""+ ""+ ""+ ""+ " 删除"+ "");       addtr.appendTo(tables);      } function deleteTrRow(tr){    
HTML动态增加和删除表格的行和列
热门推荐
huzijia888的博客
12-03 4万+
起始状态 增加行 增加列 删除行 删除列 function addrow(){   var c=document.getElementById('mytable');//获得表格的信息   if( c.rows.length==0){//如果是向一个空表增加一行  var x=c.insertRow(0);//
使用弹出框编辑(增加)表单内容
chuanougong9825的博客
05-12 1637
0、背景 使用Amazeui中Prompt 模态窗口Modal 1、JQuery 功能： 表单复位 获取表单的值，并显示在修改弹出框中（文本框、单选、多选、下拉框） 发送Post异步请求给后台 自刷新 $(function () { //编辑功能 $...
Java软件开发实战 Java基础与案例开发详解 2-3 java程序 共17页.pdf
最新发布
07-07
完整版：https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
react 在增加表单行时使from表单滚动到最底
06-10
在 React 中，当你增加表单行时，可以使用 state 来保存表单内容，并在表单内容有变化时更新 state。然后，你可以在组件更新之后（componentDidUpdate）使用 ref 和 scrollTop 属性来实现表单滚动到最底部。 下面是一个示例代码： ``` class MyForm extends React.Component { constructor(props) { super(props); this.state = { formContent: [], // 表单内容 }; this.formContainerRef = React.createRef(); // 表单容器的 ref } // 增加表单行 addFormRow = () => { const newFormRow = /* 新的表单行内容 */; this.setState(prevState => ({ formContent: [...prevState.formContent, newFormRow], })); } componentDidUpdate() { const formContainer = this.formContainerRef.current; formContainer.scrollTop = formContainer.scrollHeight; } render() { return ( <div ref={this.formContainerRef}> {this.state.formContent.map(row => /* 表单行内容 */)} <button onClick={this.addFormRow}>添加行</button> </div> ); } } ``` 在这个示例中，我们在组件的构造函数中创建了一个表单容器的 ref。当我们增加表单行时，我们使用 setState 更新表单内容，并在组件更新之后使用 ref 和 scrollTop 属性将表单滚动到最底部。 注意：这个示例代码只是一个简单的示例，实际应用中可能需要更多的逻辑处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值