Jquery克隆下拉列表和文本框，重命名增量1

Question

我是JQuery的新手，需要一些帮助。我正在尝试使用完全相同的选项复制/克隆SELECT框和TEXT框，但是通过递增1将它们重命名为新名称。

示例，我有这个SELECT下拉列表。

<table>
    <tr>
        <button id="btnAdd">Add</button>
    </tr>

    <tr>
        <td>
            <select name="ddl_1" id="ddl_1" name="ddl_1">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </td>
        <td>
            <input type="text" id="txt_1" name="txt_1">
        </td>
    </tr>

    <!-- The Clone SELECT and TEXT Boxes will append below here. -->

</table>

点击“添加”按钮后，它会将ddl_1和txt_1克隆到新行，并将其重命名为ddl_2和txt_2。像这样：

<table>
    <tr>
        <button id="btnAdd">Add</button>
    </tr>

    <tr>
        <td>
            <select name="ddl_1" id="ddl_1">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </td>
        <td>
            <input type="text" id="txt_1" name="txt_1">
        </td>
    </tr>

    <tr>
        <td>
            <select name="ddl_2" id="ddl_2">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </td>
        <td>
            <input type="text" id="txt_2" name="txt_2">
        </td>
    </tr>

    <!-- The Clone SELECT and TEXT Boxes will append below here. -->

</table>    

感谢您的帮助。

Answer 1

您应该使用JavaScript生成<td>行，而不是克隆现有行<td>。然后，当有人点击“添加”时，您可以再次调用行生成方法。

Example

var $table = $('table');
var rowCount = 0;

var generateRow = function(indx){

    $table.append('<tr><td>This row ID: '+indx+'</td>\
        <td>\
            <select name="ddl_'+indx+'" id="ddl_'+indx+'">\
                <option value="1">One</option>\
                <option value="2">Two</option>\
                <option value="3">Three</option>\
            </select>\
        </td>\
        <td>\
            <input type="text" id="txt_'+indx+'" name="txt_'+indx+'">\
        </td></tr>');

}

var addRow = function(){
    generateRow(++rowCount);
}

addRow(); // add first row automatically

$('#btnAdd').click(addRow); // add more rows every time button is clicked

Answer 2

我会尝试这样的事情。设置一个default clone对象，然后从那里开始使用一些简单的jQuery。

小提琴：http://jsfiddle.net/SinisterSystems/4SCp8/

<强> HTML：

<tr id="template">
    <td>
        <select name="ddl_" id="ddl_" name="ddl_">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </td>
    <td>
        <input type="text" id="txt_" name="txt_" />
    </td>
</tr>

<强> JS：

$(function() {
    var counter = 0;
    $('#btnAdd').on('click', function() {
        counter++;
        $('#template').clone().appendTo($('#table'));
        $('#ddl_').attr('id', 'ddl_'+counter);
        $('#txt_').attr('id', 'txt_'+counter);
    });
});

Answer 3

你可以这样做：

var counter = 1;

$("#btnAdd").click(function() {
    counter++;
    $('table').find("tr:eq(1)").clone().appendTo("table").find('select')
               .attr({
                   'name': 'ddl_' + counter,
                   'id'   : 'ddl_' + counter
               })
               .closest('td').next('td').find('input')
               .attr({
                   'name': 'ddl_' + counter,
                   'id'   : 'ddl_' + counter
               })
});

Demo