87,910
社区成员
发帖
与我相关
我的任务
分享如何用JS添加文本框
1、比如我现在有一个表单，里面有两个文本框，下面有一个添加按钮：
文本框1
文本框2
添加
2、我要在点击“添加按钮”后在文本框2下面加多个文本框3，并且添加下移。
文本框1
文本框2
文本框3
添加
每次点击“添加按钮”都有2那样的功能。最好在提交表单的时候用JS验证文本框内容是否为空！
文本框1
文本框2
添加
2、我要在点击“添加按钮”后在文本框2下面加多个文本框3，并且添加下移。
文本框1
文本框2
文本框3
添加
每次点击“添加按钮”都有2那样的功能。最好在提交表单的时候用JS验证文本框内容是否为空！
...全文
请发表友善的回复…
发表回复
马老虎 2011-07-28
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
window.onload = function () {
document.getElementById("btn_Add").onclick = function () {
var input = document.createElement("INPUT");
var div = document.createElement("DIV");
div.appendChild(input);
this.parentNode.firstChild.appendChild(div);
var inputs = document.getElementsByTagName("INPUT");
for (var i in inputs) {
//inputs[i]验证
}
}
}
</script>
</HEAD>
<BODY>
<div>
<div><input type="text" /></div>
<div><input type="text" /></div>
</div>
<button id="btn_Add">添加</button>
</BODY>
</HTML>
-----------------------------
新版老虎插件即将登场：
xuexiaodong2009 2011-07-28
- 打赏
- 举报
不错啊都是牛人啊
PerterPon 2011-07-28
- 打赏
- 举报
用createElement创建，设置属性，然后append到父元素下，或者用insertAdjacentHTML，此方法只支持IE，下面这insertHtml函数是兼容FF，chrome，opera没试过，应该也可以，效果和insertAdjacentHTML一样，验证是否为空么，获取文本框的内容，然后验证是否为空不就行了么
function insertHtml(where, el, html){
where = where.toLowerCase();
if(el.insertAdjacentHTML){
switch(where){
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
} else {
var range = el.ownerDocument.createRange();
var frag;
switch(where){
case "beforebegin":
range.setStartBefore(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el);
return el.previousSibling;
case "afterbegin":
if(el.firstChild){
range.setStartBefore(el.firstChild);
frag = range.createContextualFragment(html);
el.insertBefore(frag, el.firstChild);
return el.firstChild;
}else{
el.innerHTML = html;
return el.firstChild;
}
case "beforeend":
if(el.lastChild){
range.setStartAfter(el.lastChild);
frag = range.createContextualFragment(html);
el.appendChild(frag);
return el.lastChild;
}else{
el.innerHTML = html;
return el.lastChild;
}
case "afterend":
range.setStartAfter(el);
frag = range.createContextualFragment(html);
el.parentNode.insertBefore(frag, el.nextSibling);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
} 
MuBeiBei 2011-07-28
- 打赏
- 举报
<!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" />
<title>无标题文档</title>
</head>
<body>
<form id="t">
<table id="table">
<tr></td><input type="text" value="1" /></td></tr>
<table>
<input type="button" id="btn" value="提交" />
<input type="button" id="new" value="新增" />
</form>
<script>
document.getElementById('new').onclick = function(){
var input = document.createElement('input');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
document.getElementById('table').appendChild(tr);
};
document.getElementById('btn').onclick = function(){
var inps = document.getElementsByTagName('input'),
len = inps.length,count = 0,arr = [];
for(var i = 0; i < len; i++){
if(inps[i].type == 'text'){
arr.push(inps[i]);
}
}
for(var i = 0; i < arr.length; i++){
if(inps[i].value != ''){
count++;
}else{
count--;
}
}
if(count == arr.length){
alert('提交')
document.getElementById('t').submit();
}else{
alert('有空值')
}
};
</script>
</body>
</html>
zity_chow 2011-07-28
- 打赏
- 举报
[Quote=引用 5 楼 ricky_66 的回复:]
用Jquery实现比较简单
HTML code
<!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">……
[/Quote]
如果要删除呢，怎么写？
用Jquery实现比较简单
HTML code
<!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">……
[/Quote]
如果要删除呢，怎么写？
了無痕 2011-07-28
- 打赏
- 举报
用Jquery实现比较简单
<!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=gb2312" />
<title>无标题文档</title>
<script language="javascript1.5" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript1.5" type="text/javascript">
$().ready(function(){
$("#btn").click(function(){
$("#table").append("<tr></td><input type=\"text\" value=\"1\" /></td></tr>");
});
});
</script>
</head>
<body>
<table id="table">
<tr></td><input type="text" value="1" /></td></tr>
<table>
<input type="button" id="btn" value="提交" />
<input type="button" id="new" value="新增" />
</body>
</html>
