Question

I’m trying to create a copy/paste system for a HTML table using jQuery and a context menu plugin and I’m trying to uniquely name all of the newly created rows. So I have a function that is cloning the selected row and inserting the new row above:

function cloneAbove(TR) {
    var newRow = $(TR).clone();
    var lastID = $(TR).attr('id');
    var newID = Number(lastID.substring(3))-0.1;

    //See if that row already exists:
    if($('#tr_'+newID).length){
    alert('#tr_'+newID+' Exists');
    //If it does exist, we divide the newID by 10 until we find one that doesn't:
    var i = 0;
    while(i < 1){
        newID = newID/10;
        if($('#tr_'+newID).length > 0){
        i = 1;
        }
    }
    }
    $(newRow).attr('id','tr_'+newID);
    $(TR).before(newRow);
    $(".target").contextmenu(option);
}

First it clones the selected row (ie: ‘#tr_1’), subtracts 0.1 for the new row’s id (ie: ‘#tr_0.9’), then it is supposed to check to see if that id already exists – this is where my problem is – if it exists it enters a loop to divide by 10 until it finds a id that doesn’t.

Here is a sample of the table:

<table id="table" border=1>
       <tr class="target" id="tr_1" oncontextmenu="context('tr1')">
           <td id="tr_1_1">Row1</td>
           <td id="tr_1_2">Row1</td>
       </tr>
       <tr class="target" id="tr_2" oncontextmenu="context('tr2')">
           <td id="tr_2_1">Row2</td>
           <td id="tr_2_2">Row2</td>
       </tr>
</table>

The .length works for the ‘hard coded’ elements as they exist when the page loads, but it won’t detect any of the newly created elements. Any suggestions?

Answer 1

You’re building “id” values that are going to confuse jQuery. The selector “#tr_0.9” means, “find the element with id ‘tr_0’ and class ‘9’”, not “find the element with id ‘tr_0.9′”.

Setting aside the fact that that strikes me as a pretty weird way to construct “id” values, you may be able to make it work by “quoting” the “.” characters:

if ($(('#tr_' + newId).replace(/\./g, "\\.")).length) {
  // ... found a duplicate ...

What that does is substitute “.” for “.” in the constructed trial “id” value. You only want to do that, of course, when looking for the elements via a jQuery selector; you don’t want the actual “id” value to have backslashes in it.

Alternatively, you could replace the “.” characters with “_” or something.