JQuery, adding row but no effect on className

Question

I am trying to add a row to existing table by using clone() method. It is working fine and I also want to change CSS class name for all div elements under each td from the original row. Basically I want to make some td elements as editable. I have tried this by adding "row.find("td div")..." as you see in the code, but this code has no effect at all. Any suggestions?

 $("#create_blank_scenario").click(function(){
                var row = $('#sortable_offer_table tbody tr:first').clone(true);

                row.find("td div").addClass("editable");

                row.insertBefore('#sortable_offer_table tbody tr:first');
});

Answer 1

Most likely there's something wrong with the selector. I'd run row.find("td div") and check its length (an alert() will do) to make sure you're actually finding the div you want.

Answer 2

Perhaps there is an issue with your markup, as your code seems to be working just fine for me. Here's a demo of it working: http://jsfiddle.net/gkEbp/

I created some dummy html:

<table id="sortable_offer_table">
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
</table>

<br/><br/>

<button type="button" id="create_blank_scenario">Create Blank</button>

Added a CSS rule to highlight .editable and ran your code against it. As you can see, it works.