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

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.