//addattach.js
function resizeup(obj) {
var newheight = parseInt($(obj).style.height, 10) + 50;
document.getElementById(obj).style.height = newheight + 'px';
}
// ---------------------------------------
function resizedown(obj) {
var newheight = parseInt($(obj).style.height, 10) - 50;
if(newheight > 0) {
document.getElementById(obj).style.height = newheight + 'px';
}
}
// ---------------------------------------
function addattachfrom() {
var newnode = document.getElementById('attachbodyhidden').firstChild.cloneNode(true);
document.getElementById('attachbody').appendChild(newnode);
}
// ---------------------------------------
function removeattachfrom() {
document.getElementById('attachbody').childNodes.length > 1 && document.getElementById('attachbody').lastChild ? document.getElementById('attachbody').removeChild(document.getElementById('attachbody').lastChild) : 0;
}
// ---------------------------------------
function checkall(form) {
for (var i = 0; i < form.elements.length; i ++ ) {
var e = form.elements[i];
if (e.name != 'chkall')
e.checked = form.chkall.checked;
}
}
// ---------------------------------------
//index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>不定数量表单添加的处理方法演示</title>
<meta name="Description" content="" />
<meta content="" name="Keywords" />
<link rel="stylesheet" rev="stylesheet" href="../nav/nav.css" type="text/css" media="all" />
<script type="text/javascript" src="./addattach.js"></script>
</head>
<table width="750" border="0" cellpadding="0" cellspacing="0" id="main-table" align="center">
<tr>
<td>
<h1>不定数量表单添加的处理方法演示</h1>
<form name="f1" action="#" enctype="multipart/form-data" method="POST" onSubmit="return Validator.Validate(this,2)">
<table width="95%" border="0" cellspacing="2" cellpadding="2">
<tr>
<tr>
<td width="25%" align="right">请输入单号(*)</td>
<td width="75%" align="left"><input name="SheetID" type="text" id="" size="30" maxlength="200" dataType="Require" msg="单号必须填写" /></td>
</tr>
<tr>
<td width="25%" align="right">销售日期(*)</td>
<td width="75%" align="left"><input type="text" name="sdate" onclick="setday(this)" id="" dataType="Date" format="ymd" msg="日期格式不正确" /></td>
</tr>
<tr class="tablecell">
<td height="40" colspan="2" align="center" valign="middle" bgcolor="#F0F0F0">
(提示：点击[+]可以增加表单，点击[-]可以减少表单)<br />
以下直接按ENTER键可跳入下一表单框
</td>
</tr>
<tr class="tablecell">
<td style="padding-top:5px;" colspan="2">
<table width="90%" align="center" cellpadding="0" cellspacing="0" class="celltable">
<tbody id="attachbodyhidden" style="display:none"><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[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">药品条形码</td>
<td width="80%" align="left"><input type="text" name="BarCode[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">剂型</td>
<td width="80%" align="left"><input type="text" name="PKindID[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">单位</td>
<td width="80%" align="left"><input type="text" name="Unit[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">数量</td>
<td width="80%" align="left"><input type="text" name="Qty[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">有效日期</td>
<td width="80%" align="left"><input type="text" name="udate[]" id="" onclick="setday(this)" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
</table>
</td></tr></tbody>
<tbody id="attachbody"><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[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">药品条形码</td>
<td width="80%" align="left"><input type="text" name="BarCode[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">剂型</td>
<td width="80%" align="left"><input type="text" name="PKindID[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">单位</td>
<td width="80%" align="left"><input type="text" name="Unit[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">数量</td>
<td width="80%" align="left"><input type="text" name="Qty[]" id="" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
<tr>
<td width="20%" align="right">有效日期</td>
<td width="80%" align="left"><input type="text" name="udate[]" id="" onclick="setday(this)" onkeydown="if(event.keyCode==13)event.keyCode=9" /></td>
</tr>
</table>
</td></tr></tbody>
</table>
</td>
</tr>
<tr><td colspan="2"><a href="#add" onclick="addattachfrom();">添加[+]</a> <a href="#add" onclick="removeattachfrom();">减少[-]</a></strong><a name="add"></a></td></tr>
<tr>
<td> </td>
<td align="left"><input type="submit" name="Submit" value="添加销售记录" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
分享到：
相关推荐
总结，动态添加删除表单元素是提升网页交互性的重要手段，通过JavaScript的DOM操作，我们可以灵活地管理页面上的表单元素，实现动态的用户界面。理解并掌握这一技术，对于前端开发者来说，无疑会增强其在实际项目中...
在动态添加和删除表单元素的场景中，PHP需要能够根据用户的请求动态生成或移除HTML代码。 1. **动态生成表单**：在PHP中，可以使用字符串拼接或者模板引擎（如Twig）来动态生成HTML代码。例如，你可以创建一个数组...
在动态表单中，除了需要定义表单结构和验证规则之外，还需要处理用户与表单的交互逻辑，比如添加和删除表单字段。本文中的代码示例，提供了点击按钮添加新表单字段的功能，同时，为每个动态生成的表单字段附加了一个...
JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言，主要用于实现网页的交互功能。在...
它可能包含了创建表单、动态添加和删除字段的逻辑，以及与服务器通信的代码。通过阅读和分析这个文件，我们可以更深入地了解如何在实际项目中应用这些技术。 总之，动态添加表单是ExtJS开发中的一个重要技巧，它...
首先，`addel.js`是这个实现的核心脚本文件，它包含了动态添加和删除表单元素的逻辑。在JavaScript中，我们可以使用DOM操作方法来创建、插入或删除HTML元素。jQuery提供了更加简洁和强大的API，比如`$().append()`...
JavaScript可以帮助我们动态地添加或删除表单字段，以适应不同场景的需求。例如，在购物车页面，用户可能需要添加或移除商品项。我们可以通过`createElement`创建新元素，`appendChild`将其添加到DOM树，反之，使用`...
在网上找了很多，可都不是我想要的，所以根据别人写的自己修改了个
通过阅读和理解这个项目，你可以学习到如何在AngularJS中实现动态添加表单的完整流程，包括创建动态表单、数据模型的管理以及表单的验证和提交。 ### 5. 环境要求 注意，这个项目需要在Apache环境下运行，因为某些...
总的来说，"jQuery添加删除表单元素代码"是一个实用的工具，它可以帮助开发者轻松实现动态表单，提高用户体验。通过学习和使用这个插件，你可以更好地掌握jQuery的DOM操作和事件处理技巧，这对于任何前端开发者来说...
此外，为了实现动态添加和删除属性行，可以添加添加和删除按钮，分别调用`addItem`和`removeItem`方法： ```html 添加属性行 (index)">删除属性行 ``` ```javascript data() { return { formList: [{ equipment:...
总的来说，"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript（主要是jQuery）的示例，它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用，例如在线...
本资源提供了一款基于JavaScript实现的多附件上传表单添加类库的源码和示例程序，这对于开发者来说是一个很好的学习和实践工具。 首先，让我们深入理解JavaScript在多附件上传中的作用。JavaScript是一种客户端脚本...
《jQuery实现的动态添加删除表单元素特效》 在网页开发中，经常需要处理动态添加和删除表单元素的需求，以满足用户交互性和数据管理的灵活性。jQuery作为一个强大的JavaScript库，提供了丰富的API和方法，使得这类...
"基于React实现表单数据的添加和删除详解" React是Facebook开发的一款开源JavaScript库，用于构建用户界面。它基于组件的概念，允许开发者将UI分解为独立、可重用的组件，从而提高代码的可维护性和可读性。React中...
以上就是关于动态添加删除TEXT框的基本实现和相关知识点。这个功能可以应用于各种场景，如表单填写、笔记应用等，使得用户可以根据自己的需求动态调整界面。在实际项目中，可能还需要考虑更多的细节，如错误处理、...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
总结来说，这个示例展示了如何使用JavaScript在前端动态添加表格行，以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术（如IE6和ASP），但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
下面将详细阐述动态添加表单的核心概念、实现方法以及相关的技术栈。 1. **核心概念** - **表单（Form）**：HTML表单是网页中用于收集用户输入信息的元素，通过`<form>`标签定义。 - **DOM（Document Object ...