jQuery Code Improvement

[eluser]Fielder[/eluser]
I've very new to jQuery and have managed to put this little piece together using articles and tuts from the internet. Looking for ways and techniques to improve and streamline this piece of code, particularly the selectors... seems to be quite a bit of complicated code for what i want it to do - but it works.

The setup, I've got a table with a <td><img></td> that the user can click on the image to dynamically add another row immediately below the current <tr>. This row will expand and contain additional details about a customer. When the user clicks on the <img> again, it hides the newly added row and then removes it from the table, dynamically.
The other condition is that only 1 of these "detail" rows can be open at any given time.

Opinions are appreciated.

Code:

<table id=multistore-table >
     <tr>
         <td>ID</td>
         <td>Customer</td>
         <td>Details</td>
     </tr>
     <tr id=ms_rowdata61>
         <td>1</td>
         <td>Cust 1</td>
         <td><img  /></td>
     </tr>
     <tr id=ms_rowdata32>
         <td>2</td>
         <td>Cust 2</td>
         <td><img  /></td>
     </tr>
     <tr id=ms_rowdata98>
         <td>3</td>
         <td>Cust 3</td>
         <td><img  /></td>
     </tr>
</table>

Code:

$(document).ready(function() {
// Contract addendum table to show store entry details
    $("#multistore_table td img").click(function(){
        var id = "#" + $(this).closest('tr').attr('id');
        var ms_id = id.substring(10);
        var rowEdit_id = "rowEdit" + ms_id;
        
        if (this.src.match('plus'))
        {
            // This row is closed, open it
            var status = "open";
            var icon_filename = "minus.gif";
            var msg = "Close Edit Panel";
            
            // Close all other open rows
            $("#multistore_table tr").each(function(){
                if ($(this).hasClass('ms_rowEdit'))
                {
                    $(this).fadeOut("normal", function(){
                        $(this).prev('tr').find('img').attr('src', '../../../assets/images/treeview/plus.gif');
                        $(this).remove();
                    });
                }
            });
            
            $.post(base_url + "all_search/AJAXmultistore_editPanel", {'multistore_id' : ms_id, 'rowEdit_id' : rowEdit_id, 'status' : status},
            function(data){
                $(id).after(data);
            // jQuery UI Tabs
                $(".tabs").tabs({
                    selected: 0,
                    fx: {opacity: 'toggle'}
                });
                $("#datepicker1").datepicker();
                $("#datepicker2").datepicker();
                $("#datepicker3").datepicker();
                
                $("#addendum_removeStore").click(function(){
                    var rowEdit_class = ".ms_rowEdit";
                    
                    $(rowEdit_class).fadeOut("normal", function(){
                        var gridRow_id = '#' + $(this).prev('tr').attr('id');
                        
                        $(rowEdit_class).remove();
                        
                        $(gridRow_id).remove();
                        
                        $.post(base_url + "all_search/AJAXmultistore_removeMultistore", {'multistore_id' : ms_id}, function(){
                            
                        });
                    });
                });
            });
        }
        else
        {
            // This row is open, close it
            var status = "close";
            var icon_filename = "plus.gif";
            var msg = "Open Edit Panel";
            var id = "#" + rowEdit_id;
            
            $(id).fadeOut("normal", function(){
                $(this).remove();
            });
        }
        this.src = "../../../assets/images/treeview/" + icon_filename;
        this.title = msg;
        this.alt = msg;
    });
});

[eluser]demogar[/eluser]
I'm not sure about what you need, but here we go:

HTML

Code:

<table>
    <tr>
        <td>...</td>
        <td><a href="#" class="more">Close</a></td>
    </tr>
</table>

Javascript

Code:

$(document).ready(function() {
    // Not sure if your new table will have any new a.more, so I'll add .live to it
    $("a.more").live("click", function() {
        // Close all the opened tr. You can use also remove (to delete them)
        $("tr.new").hide();
        // Remove all the opened classes
        $("a.more").removeClass('opened');
        // Add the class opened to this one
        $(this).addClass('opened');
        
        // Now lets open the tr with the new data
        $.post(url, data, function(html){
            $(this).parent().parent().append(html);
        });
    });
});

CSS

Code:

a{background:transparent url(opened-closed.gif) no-repeat 0 0;width:16px;height:16px;display:block}
a.opened(background-position:0 -16px;)

[eluser]Fielder[/eluser]
Ok... so if I have a large table, say with 30 <tr></tr>, "tr.new" will go through each <tr> and select all those that have class "new" right. Instead of doing an .each()... am I understanding that right?

I can try that out and see how to simplify it.

Thanks.