在“var Select_For_Multiple_Choices”按钮下方创建文本框

Creating textboxes below "var Select_For_Multiple_Choices" button

本文关键字：方创建 创建 文本 Select var For Multiple Choices 按钮      更新时间：2023-09-26
<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"变量相关的按钮，我应该在单击的按钮下方显示一个文本框。同样，每当按钮是文本框时，文本框应该显示在该按钮下方......Bt 在我的代码中虽然它创建了一个文本框，但它在所有文本框之后显示......哼，我能做到吗？

您可以使用 .after（） 在找到的元素后插入。所以像这样：

$(button).after(content);

您可以通过将执行上下文 （ this ） 传递给函数 ChildTxtBoxes，例如：ChildTxtBoxes(this) 。您必须修改函数以：

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

请注意，使用 execute context（ this ） 来标识单击的按钮，并使用 .after() 在按钮后插入文本框，如 Vlad 建议的那样。

老实说，我不完全理解关键字this来解释它是如何以及为什么工作的。你可以在这里阅读更多关于JavaScript"this"关键字的信息

。

这是一个工作演示

相关文章：