JQuery - need to tweak code but not sure what to change...

[jockturner]

Hi,

Am using jQuery to hide/show rows of a table (courtesy of http://www.jankoatwarpspeed.com). Problem is I need the jQuery to respond to just the arrow (see example) not the whole row which at the moment is all clickable. Can anyone look at the jQuery and propose what needs to change to make that happen please.

Example at http://www.jankoatwarpspeed.com/exam...pandable-rows/

Here's the jQuery:

    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>

Many thanks in advance,
Jock

[tomws]

Here's where to start:

$("#report tr.odd").click(function(){

That's applying a click handler to the row. See it?

Now, find the identifier for the arrow. Looks like it might be a div.arrow. So, you'll want to move the click handler to that.

That's the easy part, though. The harder part is changing the logic inside the click handler to identify the current row. I suspect you'd need to chain in a parent() or parents() to fetch the parent row and then access the next() row like it's doing now. The toggleClass() would change to apply to $(this), I think.

[jockturner]

Thanks for replying but I'm not sure how to implement this. Ive tried

<script type="text/javascript">  
		$(document).ready(function(){
		$("#report tr:odd").addClass("odd");
		$("#report tr:not(.odd)").hide();
		$("#report tr:first-child").show();
		
		$("#report div.arrow.odd").click(function(){
			$(this).next("tr").toggle();
			$(this).find(".arrow").toggleClass("up");
		});
		//$("#report").jExpand();
	});
</script>

but now it's not working. You mentioned using the parent() or parents() function and after reading the jQuery docs I'm even more confused. Sorry I'm not great with jQuery. Any chance you could nudge me a bit more in the right direction?

[tomws]

Here's the first thing I notice:

$("#report div.arrow.odd").click(function(){

That selector is incorrect. Jquery uses the same selector "chain" as CSS. So, since div.arrow.odd wouldn't work in CSS, it won't work in jquery. Think about it like this: if you wanted to style all of the arrow divs in that table, how would you do it? Perhaps something like:

#report div.arrow

Or, more specific:

#report tr td div.arrow

Or, since the clickable rows are all classed as odd, use the original with one "extension":

#report tr.odd div.arrow

Just like CSS, the level of specificity required depends upon the rest of the structure.


I think parent()/parents() is needed because you need to move back up the DOM structure to the tr that is the parent of the clicked div.arrow. Once you've done that, then you can use the next() call that's in the original which opens the next tr. I'm probably wrong, but it may be something like this:

$(this).parents('#report tr.odd').next("tr").toggle();

The last half is reproduced from the original. The first half attempts to identify the parent tr of the div.arrow. Make sense?

[jockturner]

Yes, this is starting to make more sense now. Thanks for your patience. I've added the code and it seems to be working as expected. The last thing I need to work out is how to stop the cursor from changing to a hand (implying a link) when hovering over the row and restrict it to just the .arrow div. Is this something that can be achieved easily?

Here's my new code:

<script type="text/javascript">  
		$(document).ready(function(){
		$("#report tr:odd").addClass("odd");
		$("#report tr:not(.odd)").hide();
		$("#report tr:first-child").show();
		
		$("#report tr.odd div.arrow").click(function(){
			$(this).parents('#report tr.odd').next("tr").toggle();
			$(this).find("div.arrow").toggleClass("up");
		});
		//$("#report").jExpand();
	});
</script>

[tomws]

Once you start figuring out how jquery accesses the DOM and how the methods chain together, it's really quite easy to use.

I think you can do the cursor thing strictly in your css with the cursor property.

[jockturner]

Yes, of course. I was thinking it was the jQuery that was creating the effect but it was the CSS. Have now altered that and all is working as expected.

Thanks for your help.