请教一个js来控制加减的效果

一个表单中，有很一个文本框，要求是在这个文本框右侧有一个增加、删除的按钮点增加后，这个文本框后面会增加一个新的文本框，点一次加一次点删除后，会删除这个文本框请问这个js怎么实现呢？

解决方案 »

  1.   

    创建一个input的dom对象，然后加到原先对象的后面。
    用jquery的话很好操作的。
      

  2.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">        <script language="javascript">
                
                function addInput(){
                    var div=document.getElementById("inputDiv");
    var input=document.createElement("input");
    div.appendChild(input);
                }
                function decInput(){
    var div=document.getElementById("inputDiv");

    if(div.childNodes[0]!=null)

    div.removeChild(div.childNodes[0]);
                }
                    window.onload=function(){
                      
                    }
                        </script>
        </head>
        <body>
    <div id=inputDiv></div><div><input type=button onclick=addInput() value="+"></inpit><input type=button onclick=decInput() value="-" ></inpit></div>    </body>
    </html>
      

  3.   

    可以看一下此代码的效果，如有出处，你可以再去改改<html><head><title></title></head><body>
    <input id="addNext"  /> <a id="addNext" onclick="AddNextFn();" href="javascript:;" name="addNext">添加</a>
    <table width="200" border="0" id="addNextTable">
    </table>
      <script language="javascript" type="text/javascript">
    function AddNextFn()
    {
    var table = document.getElementById('addNextTable');
    var nRow = table .insertRow();
    nRow .insertCell().innerHTML = "<input name='txt' type='text'><input type=button value='删除' onclick='delText(this.parentElement.parentElement.rowIndex)'>";
    }
    function delText(index)
    {
    document.getElementById('addNextTable').deleteRow(index);
    }
        </script>
    </body></html>
      

  4.   

    初始有一个框的case<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <META http-equiv="Content-Style-Type" content="text/css">
    <script language="javascript">
                
                function addInput(){
                    var div=document.getElementById("inputDiv");
    var input=document.createElement("input");
    div.appendChild(input);
                }
                function decInput(){
    var div=document.getElementById("inputDiv");

    if(div.childNodes[0]!=null&&div.childNodes.length>1)
    div.removeChild(div.childNodes[0]);
                }
                    window.onload=function(){
                     
                    }
                 </script>
    </head>
    <body>

    <div id="inputDiv"><input type=text /></div>
    <div ><input type="button" onclick="addInput()" value="+"></inpit><input type="button" onclick="decInput()" value="-"></inpit></div>

    </body>
    </html>
      

  5.   

    加减号在初始框右边的情况<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <META http-equiv="Content-Style-Type" content="text/css">
    <script language="javascript">
                
                function addInput(){
                    var div=document.getElementById("inputDiv");
    var input=document.createElement("input");
    div.appendChild(input);
                }
                function decInput(){
    var div=document.getElementById("inputDiv");
    var nodeLen=div.childNodes.length;
    if(div.childNodes[nodeLen-1]!=null&&nodeLen>4)
    div.removeChild(div.childNodes[nodeLen-1]);
                }
                    window.onload=function(){
                     
                    }
                 </script>
    </head>
    <body>
    <div id="inputDiv"><input type="text" /><input type="button" onclick="addInput()" value="+" ></inpit><input type="button" onclick="decInput()" value="-" ></inpit></div>
    <div></div>
    </body>
    </html>