jQuery Help

[cotton31]

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:

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

$(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]

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

 

[cotton31]

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]

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

TL;DR: do this:

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

 

[cotton31]

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

 

[Dj_Jestar]

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]

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]

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:

$(".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]

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

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]

Looks good! I'll try that.

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

 

[cotton31]

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

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]

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

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!