Databases
StackOverflow2013
Postsdbo
POClick on header of a dynamic table, to fade content-rows out
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClick on header of a dynamic table, to fade content-rows out
    text
    copied!<p>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.</p> <p>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?</p> <p>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):</p> <pre><code> &lt;table class="MyTable"&gt; &lt;header class="myHeader"/&gt; &lt;rows /&gt; &lt;/table&gt; &lt;table class="MyTable"&gt; &lt;header class="myHeader"/&gt; &lt;rows /&gt; &lt;/table&gt; &lt;table class="MyTable"&gt; &lt;header class="myHeader"/&gt; &lt;rows/&gt; &lt;/table&gt; </code></pre> <p>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.</p> <p>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 ;))</p> <p>What I am trying to ask is:</p> <p>What is the smartest code to put in:</p> <pre><code>$(document).ready(function () { $(".myHeader").click(function () { //I try to hide the rows of the clicked header. }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload