如何动态添加文本框？

用户可以根据自己的需要添加任意数量的名称，“添加名称”链接为此目的提供服务。

我该如何处理这个规范？请检查以下规格：

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

如何动态添加文本框？

回答

相关问题