[jQuery] toggle some table rows based on partial ID

[jQuery] toggle some table rows based on partial ID


In a table, I want to click an 'expand' button and toggle the display of
between 1 and 20 hidden "detail" rows immediately following the row in which
I clicked. The "detail" rows will have IDs based on the "data" row's ID, as
follows:
<table>
    <tr id="row1" class="data">
        <td><input type="image" class="expand" />
        <td>25</td>
        <td>25</td>
        <td>25</td>
    </tr>
    <tr id="row1_1" class="detail">
        <td>10</td>
        <td>10</td>
        <td>10</td>
    </tr>
    <tr id="row1_2" class="detail">
        <td>15</td>
        <td>15</td>
        <td>15</td>
    </tr>
    <tr id="row2" class="data">
        <td>30</td>
        <td>30</td>
        <td>30</td>
    </tr>
    <tr id="row3" class="data">
        <td>25</td>
        <td>25</td>
        <td>25</td>
    </tr>
</table>
I tried something, but my syntax must be wrong. Can someone help?
$('tr.data input.expand').click(function() {
    var rowID = $(this).parent('tr.data').attr('id')        
$(this).parent('tr.data').siblings('tr.drawer[@id*=rowID]').toggle();
});
thanks!
--
View this message in context: http://www.nabble.com/toggle-some-table-rows-based-on-partial-ID-tf4470342s15494.html#a12746128
Sent from the JQuery mailing list archive at Nabble.com.