Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts

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

    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:
    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").click(function(){
                    $(this).next("tr").toggle();
                    $(this).find(".arrow").toggleClass("up");
                });
                //$("#report").jExpand();
            });
        </script>
    Many thanks in advance,
    Jock

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Here's where to start:
    Code:
    $("#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.
    Are you a Help Vampire?

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for replying but I'm not sure how to implement this. Ive tried

    Code:
    <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?

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Here's the first thing I notice:
    Code:
    $("#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:
    Code:
    #report div.arrow
    Or, more specific:
    Code:
    #report tr td div.arrow
    Or, since the clickable rows are all classed as odd, use the original with one "extension":
    Code:
    #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:
    Code:
    $(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?
    Are you a Help Vampire?

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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:
    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>

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    jockturner (04-14-2010)

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    40
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •