Hello, i am new(ish) to using jquery... I am trying to hide / show
specific rows within independent sets of tables. I can get it to hide
and show the tables seperately and i can get rows in the first table
to hide correctly, however when i hide the rows I want it hides the
rest of the tables on the page and no longer works independently. I'm
not sure what the best way to accomplish this is. I am trying to have
the <thead> header row and the first row display at all times. I'm not
sure if i am over complicating the html markup on top of the incorrect
jquery. Please see below. Thanks in advance if anyone can take a look.
Jquery (the header and first row work, however it hides all of the
other tables):
<script type="text/javascript">
$(document).ready(function() {
//expand the next table after the current div.tblContols
$('a.expand').click(function() {
$(this).parent('div').next('table.dataTable tr:gt(1)').show();
});
//collapse the next table after the current div.tblContols
$('a.collapse').click(function() {
$(this).parent('div').next('table.dataTable tr:gt(1)').hide();
});
});
</script>
Html:
<div class="dataLeft">
<div>
<h4>Table Header 01</h4>
<div class="tblControls"><a href="#" class="collapse">Collapse</a>
| <a href="#" class="expand">Expand</a></div>
<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"> </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"> </td>
<td align="right">158.87 %</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert"><a href="#">Goal</a></td>
<td align="right"> </td>
<td align="right">1.62</td>
<td align="right" class="red"> </td>
</tr>
<tr class="even">
<td class="subHeaderVert">whatever</td>
<td align="right"> </td>
<td align="right">2.57</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert">Points</td>
<td align="right"> </td>
<td align="right">2674.75</td>
<td align="right"> </td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Table Header 02</h4>
<div class="tblControls"><a href="#" class="collapse">Collapse</a>
| <a href="#" class="expand">Expand</a></div>
<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"> </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"> </td>
<td align="right">158.87 %</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert"><a href="#">Goal</a></td>
<td align="right"> </td>
<td align="right">1.62</td>
<td align="right" class="red"> </td>
</tr>
<tr class="even">
<td class="subHeaderVert">whatever</td>
<td align="right"> </td>
<td align="right">2.57</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert">Points</td>
<td align="right"> </td>
<td align="right">2674.75</td>
<td align="right"> </td>
</tr>
</tbody>
</table>
</div>
<div class="horizontalDividerSm"></div>
<div>
<h4>Table Header 03</h4>
<div class="tblControls"><a href="#" class="collapse">Collapse</a>
| <a href="#" class="expand">Expand</a></div>
<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"> </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"> </td>
<td align="right">158.87 %</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert"><a href="#">Goal</a></td>
<td align="right"> </td>
<td align="right">1.62</td>
<td align="right" class="red"> </td>
</tr>
<tr class="even">
<td class="subHeaderVert">whatever</td>
<td align="right"> </td>
<td align="right">2.57</td>
<td align="right"> </td>
</tr>
<tr class="odd">
<td class="subHeaderVert">Points</td>
<td align="right"> </td>
<td align="right">2674.75</td>
<td align="right"> </td>
</tr>
</tbody>
</table>
</div>
</div>
basic styles:
<style>
table {
margin-bottom: 55px;
}
tr.even {
background-color: #fff;
}
tr.odd {
background-color: #eee;
}
.tblControls {
text-align: right;
padding-bottom: 10px;
}
h4 {
padding: 0px 0px;
}
</style>
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
