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

Question

我要克隆的第二行的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 - uploadrow_1
2 - ddlDocumentDescription_1（它是一个asp.net控件，所以id不会是这样的）
3 - txtCustomFileName_1
4 - ddlFileType_1
5 - txtReferenceNo_1
6 - fileDocument_1
等等。

提前感谢您的帮助。

Answer 1

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

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

    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);
    }

Answer 2

• 将变量保持初始值为0
• 增加作为点击处理程序的函数内的变量。
• 重置value和input元素的select属性，使其与输入/选择的用户不同。

$(document).ready(function() {
  $("#addAnother").click(function() {
    addAnotherRow();
  });
});
var counter = 0;

function addAnotherRow() {
  ++counter;
  var row = $("#tblDoc tr:nth-child(2)").clone();
  row.find('input').val('');
  row.find('select').val('0');
  row.find(":input").attr("id", function() {
    var currId = $(this).attr("id");
    return currId.replaceAt(currId.length - 1, counter);
  });
  $('#tblDoc').append(row);
}
String.prototype.replaceAt = function(index, character) {
  return this.substr(0, index) + character;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<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>
</table>
<button id="addAnother">Add Another</button>