如何動態添加文本框？

用戶可以根據自己的需要添加任意數量的名稱，「添加名稱」鏈接爲此目的提供服務。

我該如何處理這個規範？請檢查以下規格：

alt text

感謝。

2009-10-20 Sathish Ravepati

希望這順利。

<html> 
<script type="text/javascript"> 
    function addfieldset() { 
     var namefieldset = document.getElementById("name").cloneNode(true); 
     document.getElementById("names").appendChild(namefieldset); 
    } 
    function deletefieldset(e) { 
     var namefieldset = e.parentNode; 
     namefieldset.parentNode.removeChild(namefieldset); 
    } 
</script> 
<body> 
    <div id="names"><div id="name">Name: <input name="namefield" type="text"/><a href="#" onclick="deletefieldset(this)">delete</a></div></div> 
    <input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/> 
</body> 
</html>

我記得「quirkmodes」的一篇優秀文章簡單地解釋了這一點。我仍然保留在我的書籤中。這裏它is。

美好的一天！

來源

2009-10-20 07:02:03

Thanx Ramiz，根據規範完成了工作，也很容易 quirksmode.org幫我解決了這個規範很多東西給所有的人幫助支持 – 2009-10-20 18:32:50

我很高興你發現它很有用。 – 2009-10-21 03:29:13

var input = $('#input').clone().attr('name', 'name2').attr('id', 'input-2').appendTo('body')

您可以進一步去和$(el).clone()克隆整個行/ DIV，然後做.find('input')和修改，使他們是唯一的，不衝突的名稱和ID屬性值。如果你想複製事件處理程序，你可以通過true克隆。

不完整的非jQuery的「解決方案」，因爲我不知道究竟此時OP是因爲他聲稱，他現在可以克隆節點..

<div id="wrap"> 
    <div class="foo"> 
     <label for="first_name">name:</label><input type="text" name="first_name[] " id="first_name"><a href="#">delete</a> 
    </div> 
    <a href="#" id="add">add name</a> 
    </div> 
    <script> 
    (function() { 
    var add = document.getElementById('add'), counter = 0; 
    add.onclick = function() { 
     var rows = document.getElementsByTagName('div'), last = false; 
     if (rows.length) { 
     for (var i = rows.length; i--;) { 
      if (last) { break; } 
      if (rows[i].className.length && (' ' + rows[i].className + ' ').indexOf(' foo ') != -1) { 
       last = rows[i]; 
      } 
     } 
     } 
     if (last) { 
     var newNode = last.cloneNode(true), wrap = document.getElementById('wrap'), input = newNode.getElementsByTagName('input'); 
     input.id = input.id + (counter++); 
     wrap.appendChild(newNode); 
     } 
    } 
    })();

來源

2009-10-20 06:03:53

這不是一個完整的解決方案，而是一個好的開始。它看起來像你想要將它綁定到「添加名稱」文本的「單擊」事件...並且你將不得不使用某種計數變量作爲名稱屬性......更好的辦法就是把它作爲一個數組「名稱[]」，而不用費心去修改它。 – mpen 2009-10-20 06:06:20

我從來沒有打算髮佈一個完整的解決方案，而沒有看到他的具體標記，我完全知道什麼是可能的。 – 2009-10-20 06:07:22

也許有點改頭換面：Meder的解決方案使用jQuery，我沒有在任何地方看到。 – ChrisR 2009-10-20 06:09:26

如何動態添加文本框？

回答

相關問題