tags:

views:

14625

answers:

4

Using JQuery, how do you bind a click event to a table cell (below, class="expand") that will change the image src (which is in the clicked cell - original will be plus.gif, alternating with minus.gif) and hide/show the row immediately below it based on whether that row has a class of "hide". (show it if it has a class of "hide" and hide if it does not have a class of "hide"). I am flexible with changing ids and classes in the markup.

Thanks

Table rows

<tr>
 <td class="expand"><img src="plus.gif"/></td>
 <td>Data1</td><td>Data2</td><td>Data3</td>
</tr>
<tr class="show hide">
 <td> </td>
 <td>Data4</td><td>Data5</td><td>Data6</td>
</tr>
+6  A: 

You don't need the show and hide tags:

$(document).ready(function(){ 
 $('.expand').click(function() {
  if( $(this).hasClass('hidden') )
   $('img', this).attr("src", "plus.jpg");
  else 
   $('img', this).attr("src", "minus.jpg");

  $(this).toggleClass('hidden');
  $(this).parent().next().toggle();
 });
});

edit: Okay, I added the code for changing the image. That's just one way to do it. I added a class to the expand attribute as a tag when the row that follows is hidden and removed it when the row was shown.

dbrien
Don't you just love jQuery?Instead of `$(this).find('img')` you could use the slightly more concise `$('img', this)`. The `$` function accepts a second parameter. When it is used jQuery only looks for the selector in the context of `this`.
_Lasar
Thanks, I made those changes.
dbrien
that feels a bit backwards to me. everything else reads left to right, whereas using that syntax you have to read right to left. they both have the exact same effect, so I generally try to stick to the $(this).find(...) style.
nickf
I wonder if there's any performance difference. Eg. Does using one or the other cause different code to execute inside jQuery's guts?
thenduks
A: 

This is how the images are set up in the html

<tr>

<td colspan="2" align="center"
<input type="image" src="save.gif" id="saveButton" name="saveButton"
    style="visibility: collapse; display: none" 
     onclick="ToggleFunction(false)"/>

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
      name="saveButton" style="visibility: collapse; display: inline"
      onclick="ToggleFunction(true)"/>
</td>
</tr>

Change the onClick event to your own function that's in JS to toggle between them.

In the

ToggleFunction(seeSaveButton){    
    if(seeSaveButton){
        $("#saveButton").attr("disabled", true)
                        .attr("style", "visibility: collapse; display: none;");
        $("#saveButtonDisabled").attr("disabled", true)
                                .attr("style", "display: inline;");
    }    
    else {    
        $("#saveButton").attr("disabled", false)
                        .attr("style", "display: inline;");
        $("#saveButtonDisabled")
                        .attr("disabled", true)
                        .attr("style", "visibility: collapse; display: none;");
    }
}
Brad8118
If you indent each code line by 4 spaces it appears as a "code" block, showing opening tags, etc..
ConroyP
A: 

Try this...

//this will bind the click event
//put this in a $(document).ready or something
$(".expand").click(expand_ClickEvent);

//this is your event handler
function expand_ClickEvent(){
   //get the TR that you want to show/hide
   var TR = $('.expand').parent().next();

   //check its class
   if (TR.hasClass('hide')){
      TR.removeClass('hide'); //remove the hide class
      TR.addClass('show');    //change it to the show class
      TR.show();              //show the TR (you can use any jquery animation)

      //change the image URL
      //select the expand class and the img in it, then change its src attribute
      $('.expand img').attr('src', 'minus.gif');
   } else {
      TR.removeClass('show'); //remove the show class
      TR.addClass('hide');    //change it to the hide class
      TR.hide();              //hide the TR (you can use any jquery animation)

      //change the image URL
     //select the expand class and the img in it, then change its src attribute
      $('.expand img').attr('src', 'plus.gif');
   }
}

Hope this helps.

jckeyes
thanks, that is some helpful code....but $('.expand img') will effect all the images in the expand class...I just want to effect the one image in the table cell (<td>)
CarolinaJay65
+4  A: 

Nobody has any love for the ternary operator? :) I understand readability considerations, but for some reason it clicks for me to write it as:

$(document).ready( function () {
    $(".expand").click(function() {
            $("img",this).attr("src", 
                 $("img",this)
                    .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif"
            );
            $(this).parent().next().toggle();
    });
});

...and has the benefit of no extraneous classes.

Pseudo Masochist