jquery tablo işlemleri, açılır kapanır tablo satırları(Expandable Detail Table Rows)

<script>
$(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>
<pre class=”code”>$(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’);
});</pre>

<div class=”codecaption”>Example Table (click a row)</div>

<div id=”detail_table_source” style=”display: none;”></div>
<br>
<table id=”detail_table” class=”detail”>
<col style=”width: 40px;”>
<col style=”width: 80px;”>
<col style=”width: 150px;”>
<col style=”width: 40px;”>
<thead>
<tr>
<th>ID</th>

<th colspan=”2″>Name</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr title=”Click to expand/collapse” style=”cursor: pointer;” class=”parent” id=”row123″>
<td>123</td>
<td colspan=”2″>Bill Gates</td>

<td>100</td>
</tr>
<tr style=”display: none;” class=”child-row123″>
<td>&nbsp;</td>
<td>2007-01-02</td>
<td>A short description</td>
<td>15</td>

</tr>
<tr style=”display: none;” class=”child-row123″>
<td>&nbsp;</td>
<td>2007-02-03</td>
<td>Another description</td>
<td>45</td>
</tr>

<tr style=”display: none;” class=”child-row123″>
<td>&nbsp;</td>
<td>2007-03-04</td>
<td>More Stuff</td>
<td>40</td>
</tr>

<tr title=”Click to expand/collapse” style=”cursor: pointer;” class=”parent” id=”row456″>

<td>456</td>
<td colspan=”2″>Bill Brasky</td>
<td>50</td>
</tr>
<tr style=”display: none;” class=”child-row456″>
<td>&nbsp;</td>
<td>2007-01-02</td>

<td>A short description</td>
<td>10</td>
</tr>
<tr style=”display: none;” class=”child-row456″>
<td>&nbsp;</td>
<td>2007-02-03</td>
<td>Another description</td>

<td>20</td>
</tr>
<tr style=”display: none;” class=”child-row456″>
<td>&nbsp;</td>
<td>2007-03-04</td>
<td>More Stuff</td>
<td>20</td>

</tr>

<tr title=”Click to expand/collapse” style=”cursor: pointer;” class=”parent” id=”row789″>
<td>789</td>
<td colspan=”2″>Phil Upspace</td>
<td>75</td>
</tr>
<tr style=”display: none;” class=”child-row789″>

<td>&nbsp;</td>
<td>2007-01-02</td>
<td>A short description</td>
<td>33</td>
</tr>
<tr style=”display: none;” class=”child-row789″>
<td>&nbsp;</td>

<td>2007-02-03</td>
<td>Another description</td>
<td>22</td>
</tr>
<tr style=”display: none;” class=”child-row789″>
<td>&nbsp;</td>
<td>2007-03-04</td>

<td>More Stuff</td>
<td>20</td>
</tr>
</tbody>
</table>