Question

我需要一个表单来动态生成表单元素。到目前为止，我已经修改了一个脚本以添加另一个字段txtEmail1，它可以正常工作，并在用户点击添加按钮后生成字段。

现在我需要在标签“Full Name”前加上序列号。 1,2,3,4等。我尝试了但是我无法做到正确需要专家帮助解决这个问题。

<script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

                newElem.children(':first').attr('id', 'txtEmail' + newNum).attr('txtEmail', 'txtEmail' + newNum);

                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);

                // enable the "remove" button
                $('#btnDel').attr('disabled','');

                // business rule: you can only add 5 names
                if (newNum == 5)
                    $('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element

                // enable the "add" button
                $('#btnAdd').attr('disabled','');

                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });

            $('#btnDel').attr('disabled','disabled');
        });
    </script>
</head>
 <body>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                  <label id="lblSno1"></label>  Full Name
                    <input name="name1" type="text" class="TextBoxNext" id="name1" /></td>
                    <input name="txtEmail1" type="text" class="TextBoxNext" id="txtEmail1" /></td>
   </div>
</form>
</body>

我还需要将计数分配给某个隐藏字段，以便我可以对用户创建的字段数运行插入查询。

Answer 1

尝试以下内容。我对你的代码结构做了一些修改，即：
*创建一个隐藏的模板，从中克隆所有可见的克隆 *根据需要使添加/删除按钮正常工作
*添加了隐藏字段，其中包含项目数量
*将大量代码放入重用函数中

<script type="text/javascript">

    // document - on load
    $(document).ready(function() {

        // add the first item
        AddInput();
        UpdateButtons();

        // add button - click
        $('#btnAdd').click(function() {
            AddInput();
            UpdateButtons();
        });

        // delete button - click
        $('#btnDel').click(function() {
            $('.clonedInput:last').remove();
            UpdateButtons();
        });

    });

    function AddInput()
    {
        // how many cloned input fields we currently have
        var numItems = $('.clonedInput').length; 
        var newNum = new Number(numItems + 1);

        // create the new element via clone() based on hidden template
        var newElem = $('.templateInput').clone();

        // update attributes on parent tag
        newElem.attr('id', 'input' + newNum);
        newElem.attr('class', 'clonedInput');
        newElem.show();         

        // update child elements
        newElem.children('#lblSno').html(newNum + ' ' + newElem.children('#lblSno').html());
        newElem.children('#lblSno').attr('id', 'lblSno' + newNum);
        newElem.children('#name').attr('id', 'name' + newNum);
        newElem.children('#txtEmail').attr('id', 'txtEmail' + newNum);

        // insert the new element
        $('#allInputs').append(newElem);
    }

    function UpdateButtons()
    {
        // get number of items
        var numItems = $('.clonedInput').length;

        // only enable delete button when there is more than 1 item
        if (numItems > 1)
            $('#btnDel').removeAttr('disabled');
        else
            $('#btnDel').attr('disabled', 'disabled');

        // only enable add button when there are less than 5 items
        if (numItems < 5)
            $('#btnAdd').removeAttr('disabled');
        else
            $('#btnAdd').attr('disabled', 'disabled');

        // update the hidden field
        $('#hdnNumItems').val(numItems);                
    }
</script>

<form>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
        <input type="hidden" id="hdnNumItems" value="0" />
    </div>
    <div id="allInputs">
        <div class="templateInput" style="margin-bottom:4px; display:none;">
            <label id="lblSno">Full Name</label> 
            <input name="name" type="text" class="TextBoxNext" id="name1" /></td>
            <input name="txtEmail" type="text" class="TextBoxNext" id="txtEmail1" /></td>
        </div>
    <div>
</form>

Answer 2

有数千种方法可以做你想要做的事情，而这完全取决于你选择使用哪种方法。因此，在不弄乱您的逻辑并只使用您自己的代码的情况下，为了添加序列号，只需添加以下一行：

newElem.text(newNum + " ) Full Name " );

就是这样。你有序列号前置。

在标签中生成jQuery表单字段和sno

2 个答案: