0 
<html>
<title>
</title>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
function AddingTextBoxes(){

var NumOfText=$("#NumOfTextBoxes").val();

$('#NewlyCreatedSelectBoxes').empty();

for(i=1; i<=NumOfText; i++){

var ipBoxName="MyInput"+i;

var txtBoxAutoNumbering="<input type='text' name='textbx[]' style='width:50px;'         value="+i+" />&nbsp;&nbsp;&nbsp;";
    $('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);

var txtBox="<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    $('#NewlyCreatedSelectBoxes').append(txtBox);

var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option>    <option>Text_Area</option><option>Radio_Button</option></select>&nbsp;&nbsp;&nbsp;";
    $('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);

var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()'         id='ABC'>Click for child selections</button><br><br>";     
    $('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);

}




return false;

/*for(var i=0; i<NumOfText; i++){
var x=1;
NewlyCreatedSelectBoxes.innerHTML=NewlyCreatedSelectBoxes.innerHTML+"<br>AAA "+x+"<input     type='text' name='mytext'/>";
x++;

}
return false;*/
}

function ChildTxtBoxes(){

var txtBox="<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    $('#NewlyCreatedSelectBoxes').append(txtBox);


}


</script>

</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<label>Number of text boxes would needed</label><input id="NumOfTextBoxes" type="text"/>
<button id="A" onclick=" return AddingTextBoxes()">Click</button>
<div id="NewlyCreatedSelectBoxes" name="Texty">



</div>
</div>
</form>
</body>
</html>

在这段代码中，一旦我点击了与“var Select_For_Multiple_Choices”变量相关的按钮，我就会在点击的按钮正下方显示一个文本框。同样，只要按钮是文本框，文本框就应该显示在该按钮下方……在我的代码虽然它创建了一个文本框，但它显示在所有文本框之后.... 我能做到这一点吗？

4

2 回答 2

0

您可以使用 .after() 在找到的元素之后插入。所以是这样的：

$(button).after(content);
于 2013-09-12T19:34:10.063 回答
0

this您可以通过将执行上下文 ( ) 传递给函数 ChildTxtBoxes来让您的代码按预期工作，例如： ChildTxtBoxes(this)。您必须将您的功能修改为：

function ChildTxtBoxes(button) {
    var txtBox = "<input type='text' name='textbx[]'/>"
    $(button).after(txtBox);
}

请注意使用执行上下文（this）来识别被单击的按钮，并使用.after()Vlad 建议的在按钮后插入文本框。

老实说，我并不完全理解该关键字this来解释它的工作原理和原因。您可以在此处阅读有关JavaScript “this”关键字的更多信息

这是一个工作演示

于 2013-09-18T17:31:45.130 回答