Question

I have 2 upload buttons in one page. When I click upload button, select file and upload it, it is displayed in a table, as the following html code:

<div id="MainContents">         
<p>                
    <input type="hidden" id="89a11bfc-bb33-48f4-a5b4-1e062e8347c0">
    <button>Upload files</button>
    <table cellspacing="1" cellpadding="2" class="UploadedTable">
        <tbody>
            <tr class="Change_me_Row">
                <td />
                <td />
            </tr>
        </tbody>
    </table>
</p>          
</div>
<div id="MainContents">         
    <p>                
        <input type="hidden" id="53a2a220-4c76-46db-bafa-585c7f0c456b">
        <button>Upload files</button>
        <table cellspacing="1" cellpadding="2" class="UploadedTable">
            <tbody>
                <tr class="Change_me_Row">
                    <td />
                    <td />
                </tr>
            </tbody>
        </table>
    </p>          
</div>

My attempt is that I want to change the tr class name with unique name for each upload button. I have the OnPostback event of this upload button, and I tried something like:

$(this).find("tr").removeClass("Change_me_Row").addClass("New_Class_Name");

or

$(this).closest("tr").toggleClass("Change_me_Row New_Class_Name");

but neither of them worked!

I hope someone can help me out. Thanks!

Answer 1

try going up to the parent and then find class among it’s children:

$(this).parent().children('Change_me_Row').toggleClass('Change_me_Row New_Class_Name');

Also, make sure that the context with your callback function is correct (this is pointing to the upload button).