如何点击按钮实现jsp页面动态添加文本框

[Dengcy233535448]

点击【添加选项】 ---- 文本框组自动添加一个 ------点击【删除选项】 ----删除文本框组中的最后一个文本框！！
麻烦各位了！

[s510601017]

[Quote=引用 1 楼 的回复:]
$('<input type="text" name="xx" value="默认" id="xx">').appendTo($('#要追加到的元素的id'))
[/Quote]

1楼想法基本正确
比如我用的是<UL id="u"><li><li></ul>标签，就应该是这么写了

$('<li><input type="text" name="xx" value="默认" id="xx"></li>').appendTo($('#u'))

不同布局不同写法。

[qiaowan19900712]

在添加的时候你可以给他设置动态的id 比方说多一个就+1 到时候删除的话 就通过id删（得到input的个数做相应的处理）

[bree06]

导入jquery.js

<div style="border:1px solid #ccc"></div>
<button id="create">添加选项</button>
<button id="delete">删除选项</button>
<script language="javascript">
	$('#create').click(function(){
		$('div').append('<input type=text>');
	});
	$('#delete').click(function(){
		$('div input:last').remove();
	});
</script>

[你好毒你好毒]

$('<input type="text" name="xx" value="默认" id="xx">').appendTo($('#要追加到的元素的id'))

[Dengcy233535448]

s510601017 : 能不能将具体代码发送下！ 比如javascript代码,页面代码如下:


<dt>投x票选项：</dt>
<ur id="ur1">
<li> <input type="text" name="options1" style="width: 385px"/><br/></li> <li id="li2"><input type="text" name="options1" style="width: 385px"/><br/></li>
</ur>
<dd class="button">
<input type="image" src="images/button_submit.gif" />
<a href="javascript:;" onclick="AddOption()">增加选项</a>
<a href="Subject!list.action">取消操作</a>
</dd>

[Dengcy233535448]

[Quote=引用 2 楼 的回复:]

引用 1 楼 的回复:
$('<input type="text" name="xx" value="默认" id="xx">').appendTo($('#要追加到的元素的id'))


1楼想法基本正确
比如我用的是<UL id="u"><li><li></ul>标签，就应该是这么写了

$('<li><input type="text" name="xx" value="默……
[/Quote]



s510601017 : 能不能将具体代码发送下！ 比如javascript代码,页面代码如下:


<dt>投x票选项：</dt>
<ur id="ur1">
<li> <input type="text" name="options1" style="width: 385px"/><br/></li> <li id="li2"><input type="text" name="options1" style="width: 385px"/><br/></li>
</ur>
<dd class="button">
<input type="image" src="images/button_submit.gif" />
<a href="javascript:;" onclick="AddOption()">增加选项</a>
<a href="Subject!list.action">取消操作</a>
</dd>

[qiaowan19900712]

<ul id="s">
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>55555555555555555</li>
</ul>

<input type="button" value="删除第2行" onclick="del(2);">
<input type="button" value="删除第3行" onclick="del(3);">
<input type="button" value="添加到最后行" onclick="add(-1,'最后行');">
<input type="button" value="添加到第二行" onclick="add(2,'第二行');">
<script>
function del(n)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
for (var i=0;i<t;i++)
{
if (i==n-1)
{
s.removeChild(s.childNodes[i]);
}
}
}
function add(n,txt)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
var li= document.createElement("li");
li.innerHTML=txt;
for (var i=0;i<t;i++)
{
if (n==-1)
{
s.appendChild(li);
}
else if (i==n-1)
{
s.insertBefore(li,s.childNodes[i]);
}
}
}
</script>网上这不是有例子吗