Hide/Show some HTML table cells individually and align the remaining cells as they belong to the same row [closed]
- by Brian
[Edited at the resquest of admins] The best way I can explain my problem is showning an example. I have the table that you can see on the link below (since I can't post images...), that ha a table head (blue) and four rows, whose cells are green and white in color. I just want the white cells to hide/show alternately by clicking on green cells, which would remain always visible as parent cells. After hiding white cells, the green ones should be aligned into the same row, as they would fit like tetris bricks. That's all, I think more clear is impossible.
http://i.stack.imgur.com/3n3In.jpg (follow the link to see the image explanation)
The table code:
<table class="columns" cellspacing="0" border="0">
<tr>
<td class="left" rowspan="2">
<div style="text-align:center;"></div> </td>
</tr><tr><td class="middle">
<div id="detail_table_source" style="display:none"></div>
<br>
<table id="detail_table" class="detail">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:70px;">
<col style="width:20px;">
</colgroup>
<thead>
<tr>
<th width="88">Blahhh</th>
<th width="211">BLAHH</th>
<th width="229">BLAHH</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row123" style="cursor: pointer; " title="Click to expand/collapse">
<td bgcolor="#A6A4CC">Blahhh</td>
<td bgcolor="#A6A4CC">blah blah </td>
<td bgcolor="#A6A4CC">Blahh</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td rowspan="3" bgcolor="#5B5B5B"> </td>
<td>blah blah </td>
<td>blah blah</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr class="child-row123" style="display: none; ">
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td bgcolor="#6B7A94" class="parent" id="row456" style="cursor: pointer; " title="Click to expand/collapse"><strong>Blahh</strong></td>
<td bgcolor="#FFFFFF" class="child-cell456" style="display: none; ">blah blah</td>
<td bgcolor="#FFFFFF" class="child-cell456" style="display: none; ">blah blah</td>
</tr>
<tr>
<td rowspan="4" valign="top" bgcolor="#5B5B5B" class="child-row456" style="display: none; "> </td>
<td bgcolor="#6B7A94" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah</td>
<td bgcolor="#6B7A94" class="parent" id="cell456" style="cursor: pointer; " title="Click to expand/collapse">blah blah</td>
</tr>
<tr>
<td class="child-cell456" style="display: none; ">blah blah</td>
<td class="child-cell456" style="display: none; ">blah blah</td>
</tr>
<tr>
<td class="child-cell456" style="display: none; ">blah blah</td>
<td class="child-cell456" style="display: none; ">blah blah</td>
</tr>
</tbody>
</table>
The script to hide/show whole rows (this works because it is copied from another example):
<script language="javascript">
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
</script>
And the failed attempt at expanding/hiding individual cells:
<script language="javascript">
$(function() {
$('td.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('td[@class^=child-]').hide().children('td');
});
</script>
