Naugrim Naugrim - 8 days ago 5
jQuery Question

Click on header of a dynamic table, to fade content-rows out

I have a problem with jquery and a dynamic table. I want a click on the table header to cause all the rows (not the header) to fade out. Unfortunately I can't figure out how to select the rows. Until now I've only found examples, where they have fixed number of rows and therefore fixed IDs or classes. But as I said, in my case there could be an arbitrary number of rows.

I guess I would need something like $(this).tr.effect(...).
I know that I could try to figure out all the ID's of the rows with Javascript and then fade them out. But this seems a too complex approach to that problem. Does someone know an easy way to fade out the rows?

Edit:
Sorry, I think I didn't make myself clear enough (I try again :)). I said: "I have a dynamic table." But what I meant was: I have dynamic tables on one page, and therefore more then one header. Something like this(pseudo code):

<table class="MyTable">
<header class="myHeader"/>
<rows />
</table>

<table class="MyTable">
<header class="myHeader"/>
<rows />
</table>

<table class="MyTable">
<header class="myHeader"/>
<rows/>
</table>


All this is auto generated. So I don't know how many there are (of course I could figure it out with javascript or write it in a hidden field). That's why I cant select an ID with $("#myTable") . Because there are more than one #myTable. My new approach is to code the ID of the rows I want to hide into the header ID and then select the header class with $(".myHeader"). After that I can decode the header-ID and hide the rows.

I am not sure, if this is a smart solution. So maybe someone has a better one?
(I hope you guys understand what I am trying to do ;))

What I am trying to ask is:

What is the smartest code to put in:

$(document).ready(function () {
$(".myHeader").click(function () {
//I try to hide the rows of the clicked header.
});
});

Answer

The best way is to wrap your headers in <thead> and your rows in <tbody>, then you can use this code:

$myTable = $("#myTable");

$("thead > tr", $myTable).click(function() {
    $("tbody > tr", $myTable).fadeOut();
});

But if you dont want to use them, this code will work (assuming only the first row is your header row):

$myTable2 = $("#myTable2");
$("tr:eq(0)", $myTable2).click(function() {
    $("tr:gt(0)", $myTable2).fadeOut();
});

Examples: http://jsfiddle.net/Wxa3W/1/

Edit:

Updated answer to your updated question.

Html:

<table class="MyTable">
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    </tbody>
</table>

JavaScript:

$(function() {    
    $(".MyTable > thead > tr").click(function() {
        $(this).closest(".MyTable").find("tbody > tr").fadeOut();
    });
});

And if you don't want thead/tbody:

Html:

<table class="myTable">
    <tr class="myHeader"><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
    <tr><td>Data</td><td>Data</td><td>Data</td></tr>
</table>

JavaScript:

$(function() {    
    $(".myTable .myHeader").click(function() {
        $(this).closest(".myTable").find("tr:not(.myHeader)").fadeOut();
    });
});

Example: http://jsfiddle.net/Wxa3W/2/

Comments