2

http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/の優れたコードヘルプを使用して、フィールドを動的に追加するオプションを備えたフォームを作成しました。唯一の問題は、新しい「追加」ボタンと「削除」ボタンを表示せずにフィールドを生成したいということです。これを行うにはどうすればよいですか？フィールドの下に新しいボタンを表示することで機能させることができますが、<div>フィールドの右側に配置したいのです。

<script type="text/javascript">

        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first')
                    .attr('id', 'device' + newNum)
                    .attr('name', 'device' + newNum);
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');

                if (newNum == 3)
                    $('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length;

                $('#input' + num).remove();
                $('#btnAdd').attr('disabled','');

                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });

            $('#btnDel').attr('disabled','disabled');
        });
    </script>


    <div> Name: <input type="text" name="name" id="name" /></div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Device(s):  <input type="text" name="device1" id="device1" />
    <input type="button" id="btnAdd" value="Add" />
    <input type="button" id="btnDel" value="Remove" />
     </div>
4

3 に答える 3

0 
<html>

<body>
 <div> Name: <input type="text" name="name" id="name" /></div>
 <div style="float:left;">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Device(s):  <input type="text" name="device1" id="device1" />
    </div>
 </div>
 <div style="float:left;">
    <input type="button" id="btnAdd" value="Add" />
    <input type="button" id="btnDel" value="Remove" />
 </div>
 <div style="clear:both;"></div>

<script type="text/javascript "src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            var _getNum = function() {
                return $('.clonedInput').length;
            }
            var _updateButtons = function() {
                var num     = _getNum();
                $('#btnDel').attr('disabled', num <= 1 ? 'disabled' : false);
                $('#btnAdd').attr('disabled', num >= 3 ? 'disabled' : false);
            }
            $('#btnAdd').click(function() {
                var num     = _getNum();
                var newNum  = num + 1;

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first')
                    .attr('id', 'device' + newNum)
                    .attr('name', 'device' + newNum);
                $('#input' + num).after(newElem);
                _updateButtons();
            });

            $('#btnDel').click(function() {
                var num     = _getNum();
                $('#input' + num).remove();
                _updateButtons();
            });

            _updateButtons();
        });
</script>

</body>
</html>
于 2013-06-28T15:34:54.153 に答える