Question

I have a table with multiple rows, with each row having a button within the tag. There is also a link within each td tag that when the user clicks, THAT corresponding button is supposed to show, but when I click on the link, ALL the buttons show.

Here is the html:

            <tr>
            <td width="10%" align="center"></td>
            <td width="80%" align="left"><span style="font-weight:bold;"><a href="javascript:void(0);" class="editText">About Me</a>:</span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="userDetails" style="display:none;" value="Save"/></td>
            <td width="10%" align="center"></td>
        </tr>
        <tr>
            <td width="10%" align="center"></td>
            <td width="80%" class="originalText" align="left" valign="top">
            '.$aboutMe.'
            </td>
                <td width="80%" class="aboutMe" align="center" valign="top">
                    <div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
                    <textarea class="textBox" cols="20" rows="auto"  style="display:none;">
                    '.$aboutMe.'
                    </textarea>
                </td>
            <td width="10%" align="center"></td>
        </tr>

and here is the jquery:

                $(function(){
                $(".editText").each(function(e){
                    $(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
                        e.preventDefault();     

                            //get handle for textArea           //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
                            var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
                            var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
                            var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
                            var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
                            var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
                            var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText"); 

The button is shown using the following code, which is ok, it’s just the handle to the corresponding button (code above) that is messed up:

buttonHandle.css({"visibility":"visible"}).show();

There are multiple rows, each with the same structure as the one above so if user clicks on one row, only that corresponding button should show.

Somebody please tell my what I am doing wrong. Whatever I do, I can’t seem to get this working.
Thanks a bunch!

Answer 1

Change this line:

var buttonHandle = $(this).parents("td").find(".userDetails");

To this:

var buttonHandle = $(this).closest('td').find('.userDetails');