Question

I’m trying to clone a row in a table, manipulate it a bit, and then append it to the end of the table using:

    $('a#AddAnotherLine').live('click', function() {

    var CloneRow = $('table#OptionsTable >tbody tr:first').clone();

    // Strip out value on first input type
    $(CloneRow + 'td:nth-child(1) > :input').attr('value', '');

    $('table#OptionsTable >tbody').append(CloneRow);

});

The problem I’m having is my manipulation bit is affecting all the rows on the table, not the cloned one I (believe) I’ve created a handle for. The final line doing the actual appending is working fine using this handle, so I’m a bit confused.

jsFiddle Example

Any help greatly appreciated.

Answer 1

Replace:

$(CloneRow + 'td:nth-child(1) > :input').attr('value', '');    

with:

$(CloneRow).find('td:nth-child(1) > :input').attr('value', '');

Example: http://jsfiddle.net/Tjj9C/5/

Originally, use were basically converting your clone into a string, [object Object], so your selector looked like this, [object Object]td:nth-child(1) > :input. So basically selecting td:nth-child(1) > :input each row.