<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="JavaScript">
function ShowDiv()
{
if (!document.getElementById("newdiv"))
{
var ndiv = document.createElement("div");
ndiv.id="newdiv";
ndiv.style.top="50px";
ndiv.style.left="50px";
var Obj = document.getElementById("div2").parentNode;
Obj.appendChild(ndiv);
}
var X=document.getElementById("newdiv");
X.innerHTML = document.getElementById("div2").innerHTML;
X.getElementsByTagName("input")[0].name="TextBox2"
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div id="div1" >
<input id="Button1" type="button" value="button1" onclick="ShowDiv()" />
</div>
<div id="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button2" />
</div>
</form>
</body>
</html>
以上是代码,能动态增加一个文本框,现要求能增加5个文本框,点一次,增加一个,然后还有,这样出现的动态文本框,如何取值,跟普通的一样么?
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" language="JavaScript">
function ShowDiv()
{
if (!document.getElementById("newdiv"))
{
var ndiv = document.createElement("div");
ndiv.id="newdiv";
ndiv.style.top="50px";
ndiv.style.left="50px";
var Obj = document.getElementById("div2").parentNode;
Obj.appendChild(ndiv);
}
var X=document.getElementById("newdiv");
X.innerHTML = document.getElementById("div2").innerHTML;
X.getElementsByTagName("input")[0].name="TextBox2"
}
</script>
</head>
<body >
<form id="form1" runat="server">
<div id="div1" >
<input id="Button1" type="button" value="button1" onclick="ShowDiv()" />
</div>
<div id="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button2" />
</div>
</form>
</body>
</html>
以上是代码,能动态增加一个文本框,现要求能增加5个文本框,点一次,增加一个,然后还有,这样出现的动态文本框,如何取值,跟普通的一样么?
var txtlist = document.getElementsByTagName("input");
var names = "";
for(var i=0;i<txtlist.length;i++){
names+=txtlist.value+","; //把value值组合,并以','分割
}
//将所有的name值放入隐藏域(id=subName,name=subName)
document.getElementById("subName").value=names; --------action----------------
String values = request.getParameter("subName");
String value [] = values.split(","); //这里就是所有的值了
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript" language="JavaScript">
var index=1;
function ShowDiv()
{
if(index<5)
{
var divId= "newdiv"+index;
var ndiv = document.createElement("div");
ndiv.id=divId;
ndiv.style.top="50px";
ndiv.style.left="50px";
var Obj = document.getElementById("divEmailS");
Obj.appendChild(ndiv);
var X=document.getElementById(divId);
X.innerHTML = "<input type='text' id='txtEmail"+index+"'/>";
index++;
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div id="div1">
<input id="Button1" type="button" value="button1" onclick="ShowDiv()" />
</div>
<div id="divEmailS">
<div id="div2">
<input type="text" id="newdiv" />
</div>
</div>
</form>
</body>
点一个增加一个,我下班了。。删除还没给你至于取值很简单的
<head id="Head1" runat="server">
<title>无标题页</title> <script type="text/javascript" language="JavaScript">
var index=1;
function ShowDiv()
{
if(index<6)
{
var divId= "newdiv"+index;
var ndiv = document.createElement("div");
ndiv.id=divId;
ndiv.style.top="50px";
ndiv.style.left="50px";
var Obj = document.getElementById("divEmailS");
Obj.appendChild(ndiv);
var X = document.getElementById(divId);
X.innerHTML = "<input type='text' id='txtEmail" + index + "'/><input type='button' id='button" + index + "' value='button" + index + "'/>";
var textid = "txtEmail" + index;
var buttonid = "button" + index;
document.getElementById(buttonid).onclick = function() {
var text = document.getElementById(textid).value;
alert(text);
}
index++;
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div id="div1">
<input id="ButtonX" type="button" value="buttonX" onclick="ShowDiv()" />
</div>
<div id="divEmailS">
<div id="div2">
<input type="text" id="newdiv" />
</div>
</div>
</form>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript" language="JavaScript">
var index=1;
function ShowDiv()
{
if(index<6)
{
var divId= "newdiv"+index;
var ndiv = document.createElement("div");
ndiv.id=divId;
ndiv.style.top="50px";
ndiv.style.left="50px";
var Obj = document.getElementById("divEmailS");
Obj.appendChild(ndiv);
var X=document.getElementById(divId);
X.innerHTML = "<input type='text' id='txtEmail"+index+"'/><a href='javascript:void(0)' id='aDel"+index+"' onclick='CloseDiv(\""+divId+"\",\"aDel"+index+"\")'>删除</a>";
index++;
}
}
function CloseDiv(target,atar)
{
var txtin = document.getElementById(target);
var adel = document.getElementById(atar);
txtin.parentNode.removeChild(txtin); //下面效果相同
adel.parentNode.removeChild(adel); //下面效果相同
index--;
}
</script></head>
<body>
<form id="form1" runat="server">
<div id="div1">
<input id="Button1" type="button" value="button1" onclick="ShowDiv()" />
</div>
<div id="divEmailS">
<input type="text" id="newdiv" />
</div>
</form>
</body>
</html>
添加删除功能都OK的,6楼道就只是添加了以个按钮,但是没用JS实现功能!!!
{
var Obj = document.getElementById("divEmailS");
var txtall = Obj.getElementsByTagName("input");
var txtShow = document.getElementById("txtAddress");
if(txtall.length>1)
{
var temp;
for(i=0;i<txtall.length;i++)
{
if(i==0)
temp = txtall[i].value;
else
temp += ";"+txtall[i].value;
}
txtShow.value =temp;
}
else
{
txtShow.value = txtall.value;
}
}
<div>
<input id="Button2" type="button" value="发送" onclick="getValue();" />
<input type="text" id="txtAddress" style="width:500px;"/>
</div>
获取值