在jquery / javascript中将新文本字段附加到各种div

时间:2013-04-15 07:12:58

标签: javascript jquery

我在使用javascript / jquery时遇到了一些麻烦。我目前的情况如下所示我有多个div与文本字段。让我说我使用PHP循环最初在每个div中显示2个输入字段

<div id="somediv100">
  <input type="text" id="name_100_1">
  <input type="text" id="name_100_2">
</div>
<input type="button" onclick="addnew(100)" />
<div id="somediv101">
   <input type="text" id="name_101_1">
   <input type="text" id="name_101_2">
</div>
<input type="button" onclick="addnew(101)" />  

现在我想让用户在点击相应div的addnew按钮时在相应的div中添加文本字段。
我的主要目的是继续计算在最初的两个字段之后添加多少字段。我该如何解决呢?
如果所有的值如100,101,1,2等都是由php脚本通过循环生成的

4 个答案:

答案 0 :(得分:0)

保持隐藏字段中由php添加的字段总数的数量,然后说100。现在当您点击添加按钮时,使用该隐藏字段计数并为您添加的每个新字段添加+1。

答案 1 :(得分:0)

试试这个

<script type="text/javascript">

function fnc()
{
    el=document.createElement('div');

    //el.innerHTML="<input type='textbox' name='hid"+(i+1)+"'/>";
    el.innerHTML="<input type='textbox'  />";
    document.getElementById("adiv").appendChild(el);


}
</script>
<form action="CreateDynamicDiv.asp" method="post">
<div id="adiv">
qwerty
</div>
<input type="button" value="click me" onclick="fnc();">

</form>

答案 2 :(得分:0)

http://jsbin.com/umuvus/1/edit

基本上,对于给定的div:

div.data("addedCount");

记录您添加的输入字段

div.data("addedCount", div.data("addedCount") + 1);

增量计数

$("div").data("addedCount", 0);

初始化计数

另外,如果您确定所有div的初始输入元素的数量将是相同的:

div.children("input").length - initialAmount

答案 3 :(得分:0)

动态制作所有div和文本框

    <javascript>
$(document).ready(function(){
for(i=1;<=(how many div you want);i++)
{
<div id=i>
for(j=1;j<=2;j++)
{
<input type='text' id=i+j>
}
</div>
}


});
</javascript>