jQuery Help

cotton31 · 26 Sep 2012 at 10:59

Hi,

I have a table (created by a GridView in C#.Net - but I don't think that's important)

The table created ends up looking like this:

Code:

<tr class="TableGroup1"></tr>
<tr class="TableGroup2"></tr>
<tr class="TableGroup3"></tr>
<tr class="TableGroup3"></tr>
<tr class="TableGroup3"></tr>
<tr class="TableGroup1"></tr>
<tr class="TableGroup2"></tr>
<tr class="TableGroup3"></tr>
<tr class="TableGroup2"></tr>
<tr class="TableGroup3"></tr>

Basically, TableGroup1 are the category rows, TableGroup2 the sub categories and TableGroup3 the details.

I want to collapse the table to only show the category (TableGroup1) rows, until one of them is clicked when it should show the 'child' TableGroup2 and TableGroup3 rows.

I've attempted this already in jQuery:

Code:

$(document).ready(function() {   
        $(".TableGroup2").hide(); 
        $(".TableGroup3").hide(); 
            $(".TableGroup1").click(function() {   
                $(".TableGroup2").toggle(); 
                $(".TableGroup3").toggle();      
            });   
        });

but that toggles all of the TableGroup2 & 3 rows, rather than just the ones under the clicked category.

Can you help?

Cheers!

HungryHippos · 26 Sep 2012 at 11:31

Isn't that because your jquery is set to toggle both Groups 2 and 3 if Group 1 is clicked?

cotton31 · 26 Sep 2012 at 11:36

No it needs to be like that, as groups 2 & 3 are children (technically) of group 1.

I've solved it now anyway using $(this).nextUntil(group1).toggle(); instead of $(".TableGroup2").toggle(); which basically says show every row that comes next until you find another category row.

Cheers for looking.

Dj_Jestar · 26 Sep 2012 at 11:38

Use the secondary parameter to the selector to limit the search to children of the clicked item.

TL;DR: do this:

Code:

            $(".TableGroup1").click(function() {   
                $(".TableGroup2", this).toggle(); 
                $(".TableGroup3", this).toggle();      
            });

cotton31 · 26 Sep 2012 at 11:52

Any benefit in do that over my way Dj_Jestar? Always looking to improve performance!

Dj_Jestar · 26 Sep 2012 at 13:57

I've noticed mine is in error anyway.. it would only work if group2/3 were children of group 1, not siblings. So yours is the way forward

cotton31 · 26 Sep 2012 at 15:17

Yeah unfortunately that's my issue, I can't change how the table is constructed either!

Mine works as I need it to anyway, thanks for looking!

cotton31 · 28 Sep 2012 at 09:38

Related question:

The table displays information related to users, like so:

- Ben
-Details for Ben
-Details for Ben
-Details for Ben
- Fred
-Details for Fred
-Details for Fred
- Sue
-Details for Sue

At the moment, I have this, which hides the Details row:

Code:

$(".TableGroup2").hide();
$(".TableGroup3").hide();
$(".TableGroup1").click(function() {

if ($("td", this).css("background-image").indexOf("plus") >= 0) {
    $("td", this).css("background-image", "url('/img/minus.png')");
} else {
    $("td", this).css("background-image", "url('/img/plus.png')");
};
$(this).nextUntil(".TableGroup1").toggle();

});
};

However, I need to expand the group of the user that's logged in. I already have this information displayed in a span with an id of CurrentUser. My idea was to check each 'Header' row in the table, and then fire the click function for that row if it matched the CurrentUser text? Any help?

Thanks

PCRHitman · 28 Sep 2012 at 23:16

There are many ways to do anything as I’m sure you well know, and the method you suggested is as good as any.

However my personal preference would be to encapsulate the click function in a method which takes a parameter. The parameter would be the ToggleGroup1 element... something like this

Code:

function OnLoad() {
    $(".TableGroup2").hide();
    $(".TableGroup3").hide();
    $(".TableGroup1").click(function () {
        ToggleGroup(this);
    });
    var userid = $('span#userId').html();
    ToggleGroup($(".TableGroup1[data-userid='" + userid + "']"));
}

function ToggleGroup(sender) {
    if ($("td", sender).css("background-image").indexOf("plus") >= 0) {
        $("td", sender).css("background-image", "url('/img/minus.png')");
    } else {
        $("td", sender).css("background-image", "url('/img/plus.png')");
    };
    $(sender).nextUntil(".TableGroup1").toggle();
}

cotton31 · 30 Sep 2012 at 09:44

Looks good! I'll try that.

That was my initial idea but I obviously made a mess of extracting the method somewhere!

cotton31 · 1 Oct 2012 at 10:11

OK, I've implemented that, but can you explain what this line does?

Code:

ToggleGroup($(".TableGroup1[data-userid='" + userid + "']"));

I understand that it's passing a row to the ToggeGroup function, but how is it workingg out which row?

Thanks,

cotton31 · 3 Oct 2012 at 10:48

Just to let you (and anyone else reading) know - I solved this by replacing the above line with:

Code:

ToggleGroup($("td:contains('" + userid + "')").parent());

So I find the table cell containing my user's name, and then find the parent table row of that before passing it to the ToggleGroup function.

Thanks for your help with this!