javascript - Jquery clone row and its all elements with different id

HTML Table whose 2nd row which I want to clone is

<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>

+ Add Another

I want to make a copy of second row each time on add another button.So I have used

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

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

When I clone it give same id for second row.

I want second row with id:
1 - uploadrow_1
2 - ddlDocumentDescription_1 (Its a asp control so id will not look like this)
3 - txtCustomFileName_1
4 - ddlFileType_1
5 - txtReferenceNo_1
6 - fileDocument_1
and so on.

Thanks in advance for any help.

HTML Table whose 2nd row which I want to clone is

<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>

+ Add Another

I want to make a copy of second row each time on add another button.So I have used

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

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

Share Improve this question edited May 15, 2015 at 4:57 Ehsan Sajjad 62.5k16 gold badges112 silver badges170 bronze badges asked May 15, 2015 at 4:40 Saurabh bhatia 1002 silver badges11 bronze badges

you can change the attributes of element before appending it in DOM.. – Rayon Commented May 15, 2015 at 4:43
@RayonDabre Like $("#tblDoc tr:nth-child(2)") .clone().attr('id', 'id' +Count++) ? Where count is a global variable. But how can I do with inner elements? – Saurabh bhatia Commented May 15, 2015 at 4:47

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

http://jsfiddle/y7q6x4so/3/

Select the last row and add id incrementing by one all the time.

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

Keep a variable holding initial value as 0
Increment the variable inside a function which acts as a click handler.
Reset value property of the input and select elements so that it is different than the one user has entered/selected.

$(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./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>

Be carefull if you clone a row containing input field with "id" and "name". If you don't handle the cloned "name" attribut (no different names) as you handle the "id", a radio button element will be created and your code will show a strange behaviour

This is a typical use-case when template literals shine. We can create a function that returns a template literal and which can be parameterized with the values passed to the function, then create a click event and an ever-incrementing index.

function getRow(i) {
    return `<tr id="uploadrow_${i}">
    <td>
        <asp:DropDownList ID="ddlDocumentDescription_${i}" runat="server"></asp:DropDownList>
    </td>
    <td>
        <input id="txtCustomFileName_${i}" type="text" class="upload-TextBoxes" /></td>
    <td>
        <select id="ddlFileType_${i}" class="upload-Dropdowns">
            <option value="0">--Select--</option>
            <option value="1">A</option>
            <option value="2">B</option>
        </select></td>
    <td>
        <input id="txtReferenceNo_${i}" type="text" class="upload-TextBoxes" /></td>
    <td>
        <input id="fileDocument_${i}" class="file-upload" type="file" /></td>
    </tr>`;
}

$(document).ready(function () {
    let i = 1;
    $("#addAnother").click(function () {
        $("#tblDoc").append(getRow(i++));
    });
});

<input type="button" id="addAnother" value="add another">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.7.1/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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery clone row and its all elements with different id - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)