[jquery-ui] Re: Help with hide / show specific rows in independent tables

[theo74]

i think I solved my own problem... it seems to work? Please let me
know if anyone thinks this is not a good or stable way to do this...
thanks

JQuery:

<script type="text/javascript">

$(document).ready(function() {
        //expand the next table after the current div.tblContols
        $('span.tblControls > a.expand').click(function() {
                $(this).parent().next('table').find('tr:gt(1)').show();
        });
        //collapse the next table after the current div.tblContols
        $('span.tblControls > a.collapse').click(function() {
                $(this).parent().next('table').find('tr:gt(1)').hide();
        });
});

</script>

New HTML:

<div class="dataLeft">
    <h4>Table Header 01</h4>
    <span class="tblControls"><a href="#" class="collapse">Collapse</
a> | <a href="#" class="expand">Expand</a></span>
    <table cellspacing="1" summmary="header" width="100%"
class="dataTable">
      <thead>
        <tr>
          <th width="55%"></th>
          <th width="15%"></th>
          <th align="right" width="15%">Result</th>
          <th align="right" width="15%">Points</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Sales </a></td>
          <td align="right"></td>
          <td align="right">&nbsp;</td>
          <td align="right" class="green">202.32</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert"><a href="#"> PCT Of Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">158.87 %</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">1.62</td>
          <td align="right" class="red">&nbsp;</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert">whatever</td>
          <td align="right">&nbsp;</td>
          <td align="right">2.57</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert">Points</td>
          <td align="right">&nbsp;</td>
          <td align="right">2674.75</td>
          <td align="right">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <h4>Table Header 02</h4>
    <span class="tblControls"><a href="#" class="collapse">Collapse</
a> | <a href="#" class="expand">Expand</a></span>
    <table cellspacing="1" summmary="header" width="100%"
class="dataTable">
      <thead>
        <tr>
          <th width="55%"></th>
          <th width="15%"></th>
          <th width="15%" align="right">Result</th>
          <th width="15%" align="right">Points</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Sales </a></td>
          <td align="right"></td>
          <td align="right">&nbsp;</td>
          <td align="right" class="green">202.32</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert"><a href="#"> PCT Of Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">158.87 %</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">1.62</td>
          <td align="right" class="red">&nbsp;</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert">whatever</td>
          <td align="right">&nbsp;</td>
          <td align="right">2.57</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert">Points</td>
          <td align="right">&nbsp;</td>
          <td align="right">2674.75</td>
          <td align="right">&nbsp;</td>
        </tr>
      </tbody>
    </table>

    <h4>Table Header 03</h4>
    <span class="tblControls"><a href="#" class="collapse">Collapse</
a> | <a href="#" class="expand">Expand</a></span>
    <table cellspacing="1" summmary="header" width="100%"
class="dataTable">
      <thead>
        <tr>
          <th width="55%"></th>
          <th width="15%"></th>
          <th align="right" width="15%">Result</th>
          <th align="right" width="15%">Points</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Sales </a></td>
          <td align="right"></td>
          <td align="right">&nbsp;</td>
          <td align="right" class="green">202.32</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert"><a href="#"> PCT Of Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">158.87 %</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert"><a href="#">Goal</a></td>
          <td align="right">&nbsp;</td>
          <td align="right">1.62</td>
          <td align="right" class="red">&nbsp;</td>
        </tr>
        <tr class="even">
          <td class="subHeaderVert">whatever</td>
          <td align="right">&nbsp;</td>
          <td align="right">2.57</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr class="odd">
          <td class="subHeaderVert">Points</td>
          <td align="right">&nbsp;</td>
          <td align="right">2674.75</td>
          <td align="right">&nbsp;</td>
        </tr>
      </tbody>
    </table>

</div>

--

You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to 
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=en.