2013-11-05 70 views
1

如何循環輸入類型文本,使其具有自己的唯一屬性,例如。名稱,價值。我的意思是,例如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> 
+0

所以,你的意思是每次有人點擊該按鈕,附加功能被執行,每次你想它使用不同的序列號爲創建的元素的ID? – JAL

+0

首先,我會將JavaScript從HTML標記中提取出來,這樣可以使它更加強大。然後將其綁定到輸入的'click'事件。 – JAL

回答

1

你可以那樣做:

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)"/> 
+0

您的第一個解決方案是正確的,但很抱歉,我在閱讀本文之前能夠解決我的問題。我還沒有嘗試過你的第二個解決方案:) – user2901740

+0

沒有問題,我很高興你的腳本現在可以工作;) 我的第二個解決方案與第一個解決方案非常相似,但隱藏變量'inputId'從全局命名空間,並把'add'函數放入一個新的函數(* InputManager *),所以這個函數也不會出現在全局名稱空間中。 – dooxe

1
 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遞增值。

+0

嗨,我已經這樣做了,但它不會增加變量。我不知道爲什麼..hmm – user2901740

+1

它不增加變量,因爲例如「text1」對於'input'元素不是有效的'type'屬性。而且,這裏沒有循環。除非我在這裏嚴重誤解了這個問題。 – Trojan

+0

這是javascript ...有靜態關鍵字嗎? – JAL

1

試試這個:

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/

相關問題