当前位置: 代码迷 >> JavaScript >> 请大家帮小弟我写一个js动态输入框
  详细解决方案

请大家帮小弟我写一个js动态输入框

热度:373   发布时间:2012-02-05 12:07:15.0
请大家帮我写一个js动态输入框
页面中有三个元素:
<input   type= "text "   name= "name ">
<input   type= "text "   name= "lenght ">
<input   type= "text "   name= "info ">

用户点击按钮后,
比如,上面输入name是abc     length是3     info是test

页面出现三个input框,分别如下:
<input   type= "text "   name= "name[0].name ">
<input   type= "text "   name= "name[0].info ">

<input   type= "text "   name= "name[1].name ">
<input   type= "text "   name= "name[1].info ">

<input   type= "text "   name= "name[2].name ">
<input   type= "text "   name= "name[2].info ">

当用户再把length改成2后,点击按钮,页面变成
<input   type= "text "   name= "name[0].name ">
<input   type= "text "   name= "name[0].info ">

<input   type= "text "   name= "name[1].name ">
<input   type= "text "   name= "name[1].info ">

<input   type= "text "   name= "name[2].name ">
<input   type= "text "   name= "name[2].info ">

<input   type= "text "   name= "name[3].name ">
<input   type= "text "   name= "name[3].info ">


<input   type= "text "   name= "name[4].name ">
<input   type= "text "   name= "name[4].info ">


谢谢。


------解决方案--------------------
出现的input和输入内容啥关系?没看出来.
<pre>
页面出现三个input框,分别如下:
<input type= "text " name= "name[0].name ">
<input type= "text " name= "name[0].info ">

<input type= "text " name= "name[1].name ">
<input type= "text " name= "name[1].info ">

<input type= "text " name= "name[2].name ">
<input type= "text " name= "name[2].info ">
</pre>
这不是6个吗?
------解决方案--------------------
<script language= "javascript ">
function $(obj)
{
return document.getElementById(obj);
}

function $$(obj)
{
return document.getElementById(obj).value;
}

function addItem(sName,sInfo,obj)
{
$(obj).innerHTML = $(obj).innerHTML+ ' <input type= "text " name= " '+sName+ ' "> <br/> <input type= "text " name= " '+sInfo+ ' "> <br/> ';
}
function add()
{

var iLength = parseInt($$( 'txtLength '));
var sName = $$( 'txtName ');
var sInfo = $$( 'txtInfo ');
for(var i = 1;i <=iLength;i++)
{
addItem(sName+i,sInfo+i, 'myDiv ');
}

}
</script>

<body>
<input name= "name " type= "text " id= "txtName " value= " " />
<input name= "info " type= "text " id= "txtInfo " value= " " />
<input name= "length " type= "text " id= "txtLength " value= " "/>
  相关解决方案