0 
<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();と、何も印刷されず、スペースが割り当てられます。では、機能を完全に機能させるには、どのような変更を加える必要がありますか?

4

1 に答える 1

0

問題の一部は次のロジックにあります。

  • ID に末尾の「'」がありません
  • id='BtnSet' を持つ複数の要素がドキュメントに追加されます。
  • あなたはクリアしています#BtnSetが、<br>要素は残ります

各行を含む要素でラップし、ID だけでなく要素を選択するために追加のマーカーを使用することで、これをかなりきれいにすることができます。

また、配置に使用している すべての&nbsp;and を削除し、代わりに CSS を使用することをお勧めします。<br>

この更新コードは、元のマークアップとコードをあまり変更せずに、あなたがしようとしていることを実行すると信じています。

Demo Fiddle

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 + " />&nbsp;&nbsp;&nbsp;";
        $div.append(txtBoxAutoNumbering);
        var txtBox = "<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
        $div.append(txtBox);

        var Select_SelectionOptions = "<select id='SelectOption'><option>Text_Box</option><option>Text_Area</option><option>Radio_Button</option></select>&nbsp;&nbsp;&nbsp;";
        $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>");
    }
}
于 2013-09-13T17:21:16.960 に答える