实现功能:
增加多个文本框、删除任意一个文本框,并保留已录入的数据,
核心要点:
1、div的id需要动态,这样方可支持任意删除div层
2、使用appchild的方式追加,否则增加div之后,已经录入的数据就没了
伪代码如下:
//增加证号
function addzh(){
n = n+1;
var template="<div id=\"addzh+"+n+"\">" +
"<hr>" +
"<div class=\"form-group\">" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">单一开始证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"text\" class=\"form-control\" id=\"c_dykszh\" name=\"c_dykszh\" placeholder=\"请输入单一开始证号\">" +
"</div>" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">单一结束证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"text\" class=\"form-control\" id=\"c_dyjszh\" name=\"c_dyjszh\" placeholder=\"请输入单一结束证号\">" +
"</div>" +
"</div>" +
"<div class=\"form-group\">" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">证明开始证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"text\" class=\"form-control\" id=\"c_zmkszh\" name=\"c_zmkszh\" placeholder=\"请输入证明开始证号\">" +
"</div>" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">证明结束证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"textarea\" class=\"form-control\" id=\"c_zmjszh\" name=\"c_zmjszh\" placeholder=\"请输入证明结束证号\">" +
"</div>" +
"</div>"+
"<div class=\"form-group\">" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">集成开始证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"text\" class=\"form-control\" id=\"c_jckszh\" name=\"c_jckszh\" placeholder=\"请输入集成开始证号\">" +
"</div>" +
"<label for=\"lastname\" class=\"col-sm-2 control-label\">集成结束证号</label>" +
"<div class=\"col-sm-4\">" +
"<input type=\"textarea\" class=\"form-control\" id=\"c_jcjszh\" name=\"c_jcjszh\" placeholder=\"请输入集成结束证号\">" +
"</div>" +
"</div>" +
"<div class=\"form-group\">" +
"<input type=\"button\" id=\"sczh\" name=\"sczh\" value=\"删除证号\" onclick=\"deletezh('addzh+"+n+"');\"/>" +
"</div>" +
"</div>";
var html=document.createElement('div');
html.innerHTML=template;
var div = document.getElementById("zh");
div.appendChild(html);
// var html=$('#zh').html();
// $('#zh').html(html+str);//这种方式实现,容易出现之前录入的内容就覆盖掉了。
}
//删除证号
function deletezh(id){
var div=document.getElementById(id);
div.parentNode.removeChild(div);
}
分享到:
相关推荐
下面将详细阐述如何在C#中判断多个文本框是否为空,并提供一个实用的示例方法。 首先,我们需要了解文本框(TextBox)的`Text`属性。`Text`属性用于获取或设置文本框中显示的文本内容。在用户未输入任何内容时,`...
在.NET Web开发中,动态创建多个文本框取值是一个常见的需求,特别是在用户需要输入大量数据或者根据业务逻辑自适应界面元素数量的情况下。标题"动态创建多个文本框取值"所涉及的知识点主要涵盖以下几个方面: 1. *...
在VB(Visual Basic)编程环境中,创建一个可以任意复制文本的文本框是一个常见的需求,尤其在数据传输或用户交互的场景中。这个“一个任意复制的VB文本框”实例展示了如何通过编程实现文本的复制功能,并且巧妙地...
在Microsoft Word中,有时我们需要将大段文字分布到多个文本框中,以便于版面设计或满足特定的视觉效果。本文将详细介绍如何实现多个Word文本框共同显示大段文字,以及在操作过程中需要注意的一些关键点。 首先,...
在标题“多个Word文本框合作显示大段文字.docx”和描述中提到的内容,我们可以了解到如何利用多个文本框协同工作,以便在Word文档中连续显示大段文字。下面我们将详细探讨这一操作方法。 首先,打开Word文档(可以...
6. **文本框的排列**:在多个文本框的布局中,要考虑到平衡和对比。例如,可以使用相同或相似的文本框风格来统一视觉效果,或者通过不同形状和颜色的文本框来强调关键信息。 7. **互动性**:在某些情况下,可以利用...
在Microsoft Word 2021中,插入文本框是一个实用的功能,它允许用户在文档的任意位置添加文本,而不会受制于常规的段落格式或页面布局。这对于创建复杂布局,比如制作简历、报告、海报或者任何需要精确控制文本位置...
在网页设计和开发中,"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素,它结合了下拉选择框(Dropdown)和输入文本框(Input Text)的功能,以提供更灵活、用户友好的界面。这种设计通常用于场景,...
})`:`.on()`是jQuery中的事件绑定方法,这里绑定了一个`keyup`事件,当用户在文本框中松开任意键时,这个事件就会触发。`keyup`事件与`keydown`事件不同,`keyup`是在用户释放键后触发,而`keydown`是在用户按下键...
以下是一个简单的示例代码,用于验证文本框中的文本是否全部由数字组成: ```csharp if (System.Text.RegularExpressions.Regex.IsMatch(this.textBox7.Text.Trim(), "^[0-9]*$")) { // 文本框中的文本是合法的...
- **链接文本框**:对于较长的文本内容,可以通过链接多个文本框来实现自动流转。 #### 四、文本框的应用场景 1. **报告和论文**:在撰写学术报告或论文时,使用文本框可以方便地添加注释、脚注等内容。 2. **演示...
`JTextField`是一个单行文本输入框,用户可以在其中输入任意字符。`JPasswordField`则用于隐藏输入的字符,通常用于输入密码,显示为星号或圆点。 实现自定义的占位符功能,我们可以按照以下步骤进行: 1. **创建...
例如,一个文本框可能只允许用户输入数字、小数点和减号,这样的需求可以通过设置一个特定的正则表达式来实现。下面我们将详细讨论如何构建这样的正则表达式以及其背后的工作原理。 首先,我们需要明确允许输入的...
在VB(Visual Basic)编程中,标准的TextBox控件有一个内置的限制,即它最多只能显示64KB的文本。这个限制可能在处理大量数据或需要用户输入长文本的场景下显得不足。不过,通过一些技巧,我们可以绕过这个限制,...
默认情况下,Word文本框是标准的矩形形状,但通过“绘图”工具栏,可以选择“绘图改变自选图形”,从提供的多种形状中选择一个,将文本框转变为任意你喜欢的形状。此外,你也可以先添加一个自选图形,然后通过右键...
在Excel 2010中,文本框是一个非常实用的功能,它允许用户在工作表上添加独立的文本区域,这些区域可以自由移动和调整大小,为数据报告和演示文稿增添更多灵活性。以下是对如何在Excel 2010中使用文本框的详细解释。...
`%`代表零个、一个或多个任意字符,而`_`则代表单个任意字符。例如,如果你有一个名为`Employees`的表,其中有一个字段`FirstName`,要查找所有名字以"John"开头的员工,你可以使用如下SQL语句: ```sql SELECT * ...
- 使用多个事件监听器 (`onkeypress`, `onkeyup`, `onblur`) 来控制数字的输入。 - `onkeypress` 控制键入过程中小数点的个数。 - `onkeyup` 用于实时验证输入的有效性。 - `onblur` 在焦点离开时进行最终验证,确保...
如果不是数字开头,将小数点替换为空字符串,确保文本框第一个字符必须是数字。 - 正则表达式`/\.{2,}/g`用于匹配连续出现的两个或多个小数点,并将多余的点数替换为单个小数点,保证文本框中小数点的唯一性。 - 在...