Results 1 to 6 of 6

Thread: Create unique IDs after cloning table row

  1. #1
    Join Date
    Jul 2013

    Create unique IDs after cloning table row


    I am pretty new to JS and use the below code to clone a table row and add it as a new row which works fine.
    Each row consists of the below cells (input fields and selects) + a button.

    Can someone help me and tell me how I can create unique IDs for all the newly added items here ? I was thinking of using the row index for this but am not able to get it working.

    My JS:
    <script type="text/javascript">
     function cloneRow()
      var rowCount = parseInt(document.getElementById('rowID').value, 10);
      var table = document.getElementById("outputTable3");
      var row = document.getElementById("rowOrig");
      var clone = row.cloneNode(true);
      rowCount = isNaN(rowCount) ? 0 : rowCount;
      document.getElementById('rowID').value = rowCount;
    [b]The HTML for the original row: [/'b]
                                <td><input type="text" style="width:97%" name="url[]" onBlur="lowercaseAll(this)" /></td>
                                <td><input type="text" style="width:97%" name="email[]" onBlur="lowercaseAll(this)" /></td>
                                <td><select style="width:104%" name="policy[]">
                                        <option value="">- please select -</option>
                                        <?php foreach($objPoliciesCat->policyCategory as $policiesCat){ ?> 
                                        <option value="<?php echo $policiesCat; ?>" <?php if($policiesCat=="Z"){ echo "selected"; } ?>><?php echo $policiesCat; ?></option>
                                        <?php } ?> 
                                <td><select style="width:104%" name="source[]">
                                        <option value="">- please select -</option>
                                        <option value="A">A</option>
                                        <option value="B">B</option>
                                        <option value="C" selected>C</option>
                                <td colspan="2"><input type="text" style="width:97%" name="notes[]" /></td>
                                <td class="txtcntr"><button type="button" value="" name="del[]" title="delete row" class="btn" onClick="if(parseInt(document.getElementById('rowID').value, 10)==1){lastRow()}else{$(this).closest('tr').remove(); delRow()}"><i class="icon-red icon-remove"></i></button></td>
    Thanks a lot in advance,

  2. #2
    Join Date
    Mar 2009
    If you are only concerned with creating (rather than creating AND removing) rows from a table, you might consider something like this, with indexed id's, as in row_0, row_1, etc.:

    function newRow( toBeCloned, tableId){
        var row, table, len, tags, newRow;
        row = document.getElementById(toBeCloned);
        table = document.getElementById(tableId);
        tags = table.getElementsByTagName('tr');
        len = tags.length;
        newRow = row.cloneNode(true);
        newRow.id = "row_" +  len;

  3. #3
    Join Date
    Jul 2013
    Hi Tcobb,

    thanks for the quick reply.

    I have two issues here:
    1) I need to consider the removing of rows as well as otherwise this can lead to having the same ID twice.
    2) I would also need IDs for the fields and select whereas this only creates an ID for the whole row.

    Would you have another idea to resolve this ?

    Thanks, Mike

  4. #4
    Join Date
    Mar 2009
    1. Create a variable with global scope (or have it as a property of an object with global scope) that starts out with a value of zero. Everytime you create a new row increment that variable to use as the index of the ID. Every row will have a unique id.

    2. As far as id's for elements within the table row, I would really suggest using a string
    template where you could change the indices on the copy of the template before inserting that into the document via using innerHTML.

    var template='<td  "id= tdA*">Whatever</td><td "Id=t2*">Whatever</td>';
    Make a string copy of the template and replace the asterisk with the unique number.
    Create the new table row element, give it an id indexed with the global variable, append it to the table and then set its innerHTML to the copy of the template.

    3. I did not notice you were using a 'tbody' tag for your table. The code I posted above won't work because of that. You'll need to compensate for that.

  5. #5
    Join Date
    Nov 2007
    Here's a sample page I built a couple years ago that demonstrates how to add rows with unique IDs on the row and elements in the row.

    If you are going to be removing rows, you will need to modify this line
    var numberOfRecords = parseInt($('.name-wrapper').length);
    so that rather than only counting them, you would read the values of the ids (split it on "_") and use the "highest number plus 1" as your new record number.

  6. #6
    Join Date
    Jul 2013
    you may like to use jquery .clone method with some custom code to achieve this.

       ; (function ($) {
            $.fn.cloneWithNewIds = function () {
                var newsuffix = ($("[id*='" + $(this)[0].id + "']").length);
                var clonedelement = this.clone(true);
                $(clonedelement)[0].id = $(clonedelement)[0].id + "_" + newsuffix;
                $(clonedelement).find('*').each(function (index, element) {
                    if (element.id) {
                        element.id = element.id + "_" + newsuffix;
                return clonedelement;

    you can also use it as plugin. you may like to visit http://csharpalley.com/jquery-clone-with-new-ids/ for working example.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center