如何循环输入类型文本


How to loop the input type text?

如何循环输入类型文本,使其具有自己唯一的属性,例如名称,值。我的意思是,例如 name="text1", name="text2",.类似的东西。这是我的代码。谢谢:)

<HTML>
    <HEAD>
    <TITLE></TITLE>
    <SCRIPT language="javascript">
    function add(type) {
        //Create an input type dynamically.
        var element = document.createElement("input");
        //Assign different attributes to the element.
        element.setAttribute("type", "text");
        element.setAttribute("value", "typhere");
        element.setAttribute("name", "txtbox");
        var btns = document.createElement("input");

        btns.setAttribute("type", "button" );
        btns.setAttribute("value", "delete");
        btns.setAttribute("name", "dlete");

        var foo = document.getElementById("fooBar");
        //Append the element in page (in span).
                foo.appendChild(element);
                foo.appendChild(btns);
                var br = document.createElement("br");
                foo.appendChild(br);
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM>
    <H2></H2>
    <BR/>

    <INPUT type="button" value="Add" onclick="add(document.forms[0].value);"/>
    <span id="fooBar"><br/></span>
    </FORM>
    </BODY>
    </HTML>

你可以这样做:

var inputId = 0;
function add(type){
   // do the stuff you have to do with inputId
   // input.setAttribute("name", "text" + inputId); for example
   inputId++;
}

如果你不想污染全局命名空间,你可以这样做:

(function(window){
  var inputId = 0;
  window.InputManager = {
     add : function(type){
         // do tuff with inputId
         // input.setAttribute("name", "text" + inputId); for example
         inputId++;
     }
  };
})(window);

然后

<input type="button" value="Add" onclick="InputManager.add(document.forms[0].value)"/>

试试这个:

var  counter=1;
function add(type) {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "typhere"+counter);
    element.setAttribute("name", "txtbox"+counter);
    var btns = document.createElement("input");

    btns.setAttribute("type", "button" );
    btns.setAttribute("value", "delete");
    btns.setAttribute("name", "dlete");

    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
            foo.appendChild(element);
            foo.appendChild(btns);
            var br = document.createElement("br");
            foo.appendChild(br);
            counter++;
}

演示:http://jsfiddle.net/kLJWW/

     var i=1;
   function add(type) {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element    
   element.setAttribute("type", "text");
    element.setAttribute("value", "typhere"+i);
    element.setAttribute("name", "txtbox"+i);
    var btns = document.createElement("input");

    btns.setAttribute("type", "button" );
    btns.setAttribute("value", "delete"+i);
    btns.setAttribute("name", "dlete"+i);
    i++;

使用变量 i 递增值。