Cycle/swap table rows in HTML/jQuery
<p>I came across the following situation in my application,</p>

<p><a href="http://stackoverflow.com/questions/4749183/cycle-table-rows-in-html-jquery">Cycle table rows in HTML/jQuery</a></p>

<p>But i have multiple tbody tag as follow</p>

<p>and i am dynamically creating tr inside the tbody.</p>

<p>My HTML</p>

<pre><code> &lt;table id="tblmain"&gt;
   &lt;thead&gt;
    &lt;tr&gt;
        &lt;th scope="col" class=""&gt;&lt;/th&gt;
        &lt;th scope="col" class=""&gt;&lt;/th&gt;
        &lt;th scope="col" class=""&gt;Opening&lt;/th&gt;
        &lt;th scope="col" class=""&gt;Current&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
      &lt;tbody id="1"&gt;
        &lt;tr id="fixed"&gt;
            &lt;td class=""&gt;&lt;img src="flags/USD.png" /&gt;&lt;/td&gt;
            &lt;td&gt;Selection 1&lt;/td&gt;
            &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
            &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;

        &lt;/tr&gt;
        &lt;tr id="fixed"&gt;
            &lt;td &gt;&lt;img src="flags/EUR.png" /&gt;&lt;/td&gt;
            &lt;td&gt;Selection 2 &lt;/td&gt;
            &lt;td &gt;&lt;span&gt;5.10&lt;/span&gt;&lt;/td&gt;
            &lt;td &gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr class="hidden"&gt; &lt;!--THIS SHOWS FIRST----&gt;
            &lt;td class=""&gt;&lt;img src="flags/CAD.png" /&gt; &lt;/td&gt;
            &lt;td&gt;Selection 3&lt;/td&gt;

            &lt;td class=""&gt;&lt;span&gt;8.10&lt;/span&gt;&lt;/td&gt;
            &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr class="hidden"&gt;&lt;!---THIS SHOWS FIRST---&gt;
            &lt;td class=""&gt;&lt;img src="flags/CNY.png" /&gt; &lt;/td&gt;
            &lt;td&gt;Selection 4&lt;/td&gt;

            &lt;td class=""&gt;&lt;span&gt;8.10&lt;/span&gt;&lt;/td&gt;
            &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;

    &lt;/tbody&gt;
      &lt;tbody id="2"&gt;
    &lt;tr id="fixed"&gt;
        &lt;td class=""&gt;&lt;img src="flags/USD.png" /&gt;&lt;/td&gt;
        &lt;td&gt;Selection2 1&lt;/td&gt;
        &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
        &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr id="fixed"&gt;
        &lt;td &gt;&lt;img src="flags/EUR.png" /&gt;&lt;/td&gt;
        &lt;td&gt;Selection2 2 &lt;/td&gt;
        &lt;td &gt;&lt;span&gt;5.10&lt;/span&gt;&lt;/td&gt;
        &lt;td &gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr class="hidden"&gt; &lt;!--THIS SHOWS FIRST----&gt;
        &lt;td class=""&gt;&lt;img src="flags/CAD.png" /&gt; &lt;/td&gt;
        &lt;td&gt;Selection2 3&lt;/td&gt;

        &lt;td class=""&gt;&lt;span&gt;8.10&lt;/span&gt;&lt;/td&gt;
        &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr class="hidden"&gt;&lt;!---THIS SHOWS FIRST---&gt;
        &lt;td class=""&gt;&lt;img src="flags/CNY.png" /&gt; &lt;/td&gt;
        &lt;td&gt;Selection2 4&lt;/td&gt;

        &lt;td class=""&gt;&lt;span&gt;8.10&lt;/span&gt;&lt;/td&gt;
        &lt;td class=""&gt;&lt;span&gt;3.1&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="hidden"&gt;&lt;!---THIS REPLACES THE ROWS ABOVE---&gt;
        &lt;td class=""&gt;&lt;img src="flags/CNY.png" /&gt; &lt;/td&gt;
        &lt;td&gt;Selection2 5&lt;/td&gt;

        &lt;td class=""&gt;&lt;span&gt;81.10&lt;/span&gt;&lt;/td&gt;
        &lt;td class=""&gt;&lt;span&gt;31.1&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;



&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>How would i cycle table row at time in all tbody tag???</p>

<p>help will be much appreciated.  </p>

<p>Thanks,</p>
