javascript - Jquery 克隆行及其具有不同 id 的所有元素

Question

我要克隆的第 2 行是 HTML 表

<table id="tblDoc" class="doc-Table">
<tr>
    <td>
        <label>Document Description</label></td>
    <td>
        <label>Custom</label></td>
    <td>
        <label>File Type</label></td>
    <td>
        <label>Ref</label></td>
    <td>
        <label>Document</label></td>
    <td></td>
</tr>
<tr id="uploadrow_0">
    <td>
        <asp:DropDownList ID="ddlDocumentDescription_0" runat="server"></asp:DropDownList>
    </td>
    <td>
        <input id="txtCustomFileName_0" type="text" class="upload-TextBoxes" /></td>
    <td>
        <select id="ddlFileType_0" class="upload-Dropdowns">
            <option value="0">--Select--</option>
            <option value="1">A</option>
            <option value="2">B</option>
        </select></td>
    <td>
        <input id="txtReferenceNo_0" type="text" class="upload-TextBoxes" /></td>
    <td>
        <input id="fileDocument_0" class="file-upload" type="file" /></td>
</tr>

+ 添加另一个

每次添加另一个按钮时，我都想复制第二行。所以我使用了

$(document).ready(function () {
    $("#addAnother").click(function () {
        addAnotherRow();
    });
});

function addAnotherRow() {
    var row = $("#tblDoc tr:nth-child(2)").clone();
    $('#tblDoc').append(row);
}

当我克隆它时，它为第二行提供相同的 ID。

我想要第二行的 id:
1 - 上传行_1
2 - ddlDocumentDescription_1(它是一个 asp.net 控件，所以 id 不会像这样)
3 - txtCustomFileName_1
4 - ddlFileType_1
5 - txtReferenceNo_1
6 - 文件文档_1
等等。

在此先感谢您的帮助。

Answer 1

http://jsfiddle.net/y7q6x4so/3/

选择最后一行并添加一直递增 1 的 id。

    function addAnotherRow() {
        var row = $("#tblDoc tr").last().clone();
        var oldId = Number(row.attr('id').slice(-1));
        var id = 1 + oldId;


        row.attr('id', 'uploadrow_' + id );
        row.find('#txtCustomFileName_' + oldId).attr('id', 'txtCustomFileName_' + id);
        row.find('#ddlDocumentDescription_' + oldId).attr('id', 'ddlDocumentDescription_' + id);
        row.find('#ddlFileType_' + oldId).attr('id', 'ddlFileType_' + id);
        row.find('#txtReferenceNo_' + oldId).attr('id', 'txtReferenceNo_' + id);
        row.find('#fileDocument_' + oldId).attr('id', 'fileDocument_' + id);

        $('#tblDoc').append(row);
    }