Question

我使用以下代码，以便用户可以添加多个人。（我使用http://goo.gl/LreLVj上的示例代码）

如何更改用户创建的每个新行的ID，以便我有一个txtFirst1，txtMiddle1，txtLast1，txtFirst2，txtMiddle2，txtLast2等.....

<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 = $('#divInput' + num).clone().attr('id', 'divInput' + newNum);

            // clear input value for cloned items
            newElem.find('input,textarea').val('');

            // TO DO: Remove number from each input filed ID and append value of num to name.

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

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

            // Limit the number of input rows.
            if (newNum == 25)
                $('#btnAdd').attr('disabled', 'disabled');
        });

        $('#btnDel').click(function () {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#divInput' + 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>


<div id="divInput1" style="margin-bottom: 4px;" class="clonedInput">
  <b>First Name:</b> <input type="text" name="firstName" id="txtFirst" /> 
  <b>Middle Name:</b> <input type="text" name="middleName" id="txtMiddle" />
  <b>Last Name:</b> <input type="text" name="lastName" id="txtLast" />
</div>
<div>
  <input type="button" id="btnAdd" value="add another name" />
  <input type="button" id="btnDel" value="remove name" />
</div>

Answer 1

在花了半天的时间后，终于想到了这一点。我在代码中添加了一个函数。还必须将1附加到html输入框代码的末尾。

<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 = $('#divInput' + num).clone().attr('id', 'divInput' + newNum);

            // clear input value for cloned items
            newElem.find('input,textarea').val('');

            //TO DO: Replace clone num with incremental num.
            newElem.find(':input').each(function () {
                $(this).attr('id', $(this).attr('id').replace(/\d+/, newNum));
                $(this).attr('name', $(this).attr('name').replace(/\d+/, newNum));
            });

            // insert the new element after the last "duplicatable" input field
            $('#divInput' + 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
            $('#divInput' + 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>


<div id="divInput1" style="margin-bottom: 4px;" class="clonedInput">
  <b>First Name:</b> <input type="text" name="firstName1" id="txtFirst1" /> 
  <b>Middle Name:</b> <input type="text" name="middleName1" id="txtMiddle1" />
  <b>Last Name:</b> <input type="text" name="lastName1" id="txtLast1" />
  <b>SSN:</b> <input type="text" name="SSN1" id="txtSSN1" />
  <b>DOB:</b> <input type="text" name="DOB1" id="txtDOB1" />  
</div>
<div>
  <input type="button" id="btnAdd" value="add another name" />
  <input type="button" id="btnDel" value="remove name" />
</div>

从克隆输入修改多个ID

1 个答案: