动态无限添加文本和取消添加文本,在文本区域里面写信息,请问怎么把写的信息最后在弹出的信息确认框体中显示出来?

<!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 type="text/javascript">
function add(){
document.getElementById("text").value="";
document.getElementById("one").style.display="block";
}
function delet(){
document.getElementById("text").value="";
document.getElementById("one").style.display="none";}
function show(){
alert(document.getElementById("text").value);
}
</script>
</head>
<body>
<div id="one" style="display:none"><input type="text"  name="text" id="text"size="10"/></div>
<input  type="button"   onclick="add()" value="添加文本" />
<input name="delete" type="submit"  onclick="delet()" value="删除文本" />
<input name="ok"  type="submit" onclick="show()" value="确定" />
</body>
</html>

解决方案 »

  1.   

    不知道找个能不能凑合着用,要去吃饭了,回来再想想
    <!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 type="text/javascript">
    var str=0;;
    var  childinput =new Array(5);//定义要增加文本框的数量
    function add(){
    childinput[str]=document.createElement("input");
    document.getElementById("one").appendChild(childinput[str]);
    str=parseInt(str+1);
    }
    function delet(){
    str--;
    document.getElementById("one").removeChild(childinput[str]);
    }
    function show(){
    var sum=childinput[0].value;
    for(var i=1;i<str;i++){
    sum+=childinput[i].value;
    }
    alert(sum);
    }
    </script>
    </head>
    <body>
    <div id="one" ></div>
    <input  type="button"   onclick="add()" value="添加文本" />
    <input name="delete" type="submit"  onclick="delet()" value="删除文本" />
    <input name="ok"  type="submit" onclick="show()" value="确定" />
    </body>
    </html>
      

  2.   

    基本上差不多了.....<!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 type="text/javascript">
    var test={
    "str":"0",
    "childbr":new Array(4),
    "childinput":new Array(5),//定义要增加文本框的数量
    "add":function(){
     this.childbr[this.str]=document.createElement("br");
    this.childinput[this.str]=document.createElement("input");
    document.getElementById("one").appendChild(this.childinput[this.str]);
    document.getElementById("one").appendChild(this.childbr[this.str]);
    this.str=parseInt(this.str+1);
    },
    "delet":function(){
    this.str--;
    document.getElementById("one").removeChild(this.childinput[this.str]);
    document.getElementById("one").removeChild(this.childbr[this.str]);
    },
    "show":function(){
    var sum=this.childinput[0].value;
    for(var i=1;i<this.str;i++){
    if(isNaN(parseInt(this.childinput[i].value,10)))
    sum+=this.childinput[i].value;
    else
    sum+=parseInt(this.childinput[i].value,10);}
    alert(sum);
    }
    }
    function addinput(){
    test.add();
    }
    function deletinput(){
    test.delet();
    }
    function showvalue(){
    test.show();}
    </script>
    </head>
    <body>
    <div id="one" ></div>
    <input  type="button"   onclick="addinput()" value="添加文本" />
    <input name="delete" type="submit"  onclick="deletinput()" value="删除文本" />
    <input name="ok"  type="submit" onclick="showvalue()" value="确定" />
    </body>
    </html>
      

  3.   

    <!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 type="text/javascript">
    var test={
    "str":"0",
    "childbr":new Array(4),
    "childinput1":new Array(5),
    "childinp1":new Array(5),
    "childinp2":new Array(5),
    "childinput2":new Array(5),//定义要增加文本框的数量
    "add":function(){
    this.childbr[this.str]=document.createElement("br");
    this.childinp1[this.str]=document.createElement("span");
    this.childinp2[this.str]=document.createElement("span");
    this.childinput1[this.str]=document.createElement("input");
    this.childinput2[this.str]=document.createElement("input");
    document.getElementById("one").appendChild(this.childinp1[this.str]);
    this.childinp1[this.str].innerHTML="姓名";
    document.getElementById("one").appendChild(this.childinput1[this.str]);
    document.getElementById("one").appendChild(this.childinp2[this.str]);
    this.childinp2[this.str].innerHTML="性别";
    document.getElementById("one").appendChild(this.childinput2[this.str]);
    document.getElementById("one").appendChild(this.childbr[this.str]);
    this.str=parseInt(this.str+1);
    },
    "delet":function(){
    this.str--;
    document.getElementById("one").removeChild(this.childinput1[this.str]);
    document.getElementById("one").removeChild(this.childinput2[this.str]);
    document.getElementById("one").removeChild(this.childbr[this.str]);
    document.getElementById("one").removeChild(this.childinp1[this.str]);
    document.getElementById("one").removeChild(this.childinp2[this.str]);
    },
    "show":function(){
    var sum=this.childinp1[0].innerHTML+":"+this.childinput1[0].value.toString()+"  "+this.childinp2[0].innerHTML+":"+this.childinput2[0].value.toString()+"\n";
    for(var i=1;i<this.str;i++){
    sum=sum+this.childinp1[i].innerHTML+":"+this.childinput1[i].value.toString()+"  "+this.childinp2[0].innerHTML+":"+this.childinput1[0].value.toString()+"\n";}
    alert(sum);
    }
    }function addinput(){
    test.add();
    }
    function deletinput(){
    test.delet();
    }
    function showvalue(){
    test.show();
    }
    </script>
    </head>
    <body>
    <div id="one" ></div>
    <input  type="button"   onclick="addinput()" value="添加文本" />
    <input name="delete" type="submit"  onclick="deletinput()" value="删除文本" />
    <input name="ok"  type="submit" onclick="showvalue()" value="确定" />
    </body>
    </html>
      

  4.   

    上面的代码我已经看过,存在一个问题饿,就是你在第2个以后的添加文本信息中,"性别"这文本框里面写的信息都不能在最后的信息确认框中正确显示~还有最好在最后信息确认框体中有"确定","取消"按钮,点取消可以返回修改~以下是我刚才写的一段JS代码,样子出来了,就希望实现一个功能~希望在添加的文本信息框体中输入的信息能在最后的信息框体中显示出来~即你写几条"姓名"和"性别"信息点"确定"按钮,在最后的信息框体中显示出正确的信息来~~麻烦了~
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <title>困惑好9的问题</title>

    <style type="text/css">
    body
    {
    font-size:12px;
    }

    .STYLE6 {color: #000000; font-weight: bold; }
    .STYLE7 {font-style:italic; font-weight: bold; }
        </style>

    <script type="text/javascript" language="javascript"> 
    //增加一个TextBox
    function Add()
    {
        var table=document.getElementById("table");
        var num=document.getElementsByName("性别").length;
        if(num>=2)
        {
            var remove=document.getElementById("btnRemove");
            remove.style.visibility="visible";
        }
        var tr=table.insertRow(table.rows.length-2);
        var td1=tr.insertCell();
        var td2=tr.insertCell();
    var td3=tr.insertCell();
    var td4=tr.insertCell();
        //var IDVal="性别"+(num+1);
        //alert(IDVal);
        td1.innerText="姓名"+(num+1);
    td2.innerHTML="<input type='Text' name='姓名' id='姓名"+(num+1)+"' size='18'>";
    td3.innerText="*性别"+(num+1);
        td4.innerHTML="<input type='Text' name='性别' id='性别1"+(num+1)+"' size='32'>";
        //alert(td2.innerHTML);
    }

    //移去最后一个TextBox
    function Remove()
    {
        var table=document.getElementById("table");
        var num=document.getElementsByName("性别").length;
        if(num<=3)
        {
            var remove=document.getElementById("btnRemove");
            remove.style.visibility="hidden";
        }
        table.deleteRow(table.rows.length-3);
    }
    </script> 
    <form method="post" name="RegForm" action="target.html" >
      <table id="table"  width="570" border="0" cellspacing="10" align="left">
        <tr>
          <td width="43">姓名1</td>
          <td width="126"><input name="姓名" type="text" id="姓名1" size="18" /></td>
          <td width="108">*性别1 </td>
          <td width="235"><input name="性别" id="性别1" type="text" size="32" /></td>
    </tr>
          <tr>
              <td>姓名2              </td>
              <td><input name="姓名" type="text" id="姓名2" size="18" /></td>
              <td>*性别2 </td>
              <td><input name="性别" id="性别2" type="text" size="32"/></td>
          </tr>
          <tr>
            <td colspan="2">
                <input id="btnAdd" type="button" onclick="Add()" value="增加节点" />
                <input id="btnRemove"  type="button" style="visibility:hidden" onclick="Remove();" value="移去节点"/>        </td>
        </tr>
    <tr>
          <td colspan="4" align="center">
              <input type="submit" name="Submit" value="提交" />
              <input type="reset" name="reset" value="重置" />      </td>
        </tr>
        </table>
    </form>
      

  5.   

    我试过了,没有问题啊,ff跟ie都没有问题啊.修改你可以随时修改啊,因为它读取内容是你点一次它循环一次
      

  6.   

    你是要把它插到表格里面?你看明白它的原理是什么改改就可以咯.创建什么标签就在test对象里面加个什么标签就可以了.
      

  7.   

    八好意思,这句该下.sum=sum+this.childinp1[i].innerHTML+":"+this.childinput1[i].value.toString()+"  "+this.childinp2[i].innerHTML+":"+this.childinput2[i].value.toString()+"\n";
      

  8.   

    你那10楼的代码我复制加粘贴了,但是添加的第一个"姓名"文本里面写入的信息和第2个甚至以后的添加的"性别"里面的信息都完全一样的~也就是说:第一条"姓名"里面写123,第2条甚至以后的"性别"文本里面无论你写什么,最后都显示123~~不知道为什么.难道我这里出现所谓的BUG?