<html>
<title>
</title>
<head>
<link rel="stylesheet" href="new_2.css" type="text/css"/>
<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 $div = $('<div/>').addClass('row jsRow');
$('<input/>').attr('type', 'text')
.attr('name', 'textbx[]')
.attr('id', 'TxtBx_' + i)
.attr('value', i)
.addClass('txtbx')
.appendTo($div);
$('<input/>').attr('type', 'text')
.attr('name', 'textbx[]')
.addClass('txtbx2')
.appendTo($div);
$('<select/>').attr('id', 'SelectOption_' + i)
.append( $('<option/>').text('Text_Box') )
.append( $('<option/>').text('Text_Area') )
.append( $('<option/>').text('Radio_Button') )
.addClass('selectbx')
.appendTo($div);
$('<button/>').attr('id', 'Child_Btn_' + i)
.attr('value', 'B')
.text('Click for child selections')
.on('click', ChildTxtBoxes)
.appendTo($div);
$('<div/>').addClass('BtnSet').appendTo($div);
$div.appendTo($('#NewlyCreatedSelectBoxes'));
}
return false;
}
function ChildTxtBoxes() {
var $this = $(this);
var $BtnSet = $this.closest('div').find('.BtnSet');
var idBase = 'TxtID_' + $this.attr('id').split('_').slice(-1) + '_';
var retVal = prompt("Enter the number of textboxes need to add");
console.log($BtnSet);
$BtnSet.empty();
for (i = 1; i <= retVal; i++) {
$('<input/>').attr('id', idBase + i)
.attr('type', 'text')
.attr('name', 'textbx[]')
.appendTo($('<div/>').appendTo($BtnSet));
}
alert("AAAAAAAAAAAAAAA");
}
</script>
</head>
<body>
<form >
<div id="PHPForms" >
<!--Designing PHP forms dynamically-->
<label>Form Heading</label><input type="text"/><br><br>
<input id="NumOfTextBoxes" type="text" value="0"></input>
<button id="addem" onclick="return AddingTextBoxes()">Add Textboxes</button>
<div id="NewlyCreatedSelectBoxes">
</div>
<div id='BtnSet'></div></div>
</form>
</body>
</html>
この例ではclick、[クリックして子を選択]ボタンを押すと、$('#BtnSet').empty();メソッドを使用しない場合に指定されたテキストボックスの数が完全に出力されます。しかし、ポップアップテキストボックスに別の値を再入力すると、前のテキストボックスのセットを空にすることなくテキストボックスが印刷されます。そして、私が印刷する場合、$('#BtnSet').empty();それはスペースを割り当てるだけで何も印刷しません。では、関数を完全に機能させるために私がすべき変更は何ですか？
問題の一部はこのロジックにあります：
#BtnSetいますが、<br>要素は残ります各行を含む要素でラップし、IDだけでなく選択する要素に追加のマーカーを使用することで、これをかなりクリーンアップできます。
また、ポジショニングに使用している とをすべて削除し、<br>代わりにCSSを使用することをお勧めします。
この更新コードは、元のマークアップとコードをあまり変更せずに、あなたがやろうとしていることを実行すると信じています。
function AddingTextBoxes() {
var NumOfText = $("#NumOfTextBoxes").val();
$('#NewlyCreatedSelectBoxes').empty();
for (i = 1; i <= NumOfText; i++) {
var ipBoxName = "MyInput" + i;
// Wrap your row in a containing div with a class of 'jsRow'
var $div = $('<div/>').addClass('jsRow');
var txtBoxAutoNumbering = "<input type='text' name='textbx[]' id='TxtBx" + i + "' style='width:50px;' value=" + i + " /> ";
$div.append(txtBoxAutoNumbering);
var txtBox = "<input type='text' name='textbx[]'/> "
$div.append(txtBox);
var Select_SelectionOptions = "<select id='SelectOption'><option>Text_Box</option><option>Text_Area</option><option>Radio_Button</option></select> ";
$div.append(Select_SelectionOptions);
var Select_For_Multiple_Choices = "<button type='button' onclick='ChildTxtBoxes(this)' id='Child_Btn" + i + "' value='B'>Click for child selections</button><br>";
$div.append(Select_For_Multiple_Choices);
$div.appendTo($('#NewlyCreatedSelectBoxes'));
}
return false;
}
function ChildTxtBoxes(item) {
// Use nextUntil to remove any divs with class `BtnSet` after it
$(item).nextUntil('.jsRow').remove();
var retVal = prompt("Enter the number of textboxes need to add");
for (i = 1; i <= retVal; i++) {
$(item).after("<div class='BtnSet' i><input id='TxtID" + i + "' type='text' name='textbx[]'/></div>");
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加