How to find rows between other rows w/ID then add class

Posted by Ravex on Stack Overflow See other posts from Stack Overflow or by Ravex
Published on 2010-04-10T15:39:26Z Indexed on 2010/04/10 15:43 UTC
Read the original article Hit count: 204

Filed under:
|
|
|
|

Hi guys. i'm stuck with my table. need create toggle rows function. but i no idea how to find sub rows in table. Some one can help me?

  1. I have table with many rows > 500
  2. All Rows have class="row-1,row-2.....row-600 etc"
  3. And all main rows also have class="parent"

between each "parent" rows i have 6 rows So i need for toggle/collapse purposes find all (sub)rows betwen parent rows. and add class with id like in prevous parent row.

For example: parent have class="row-1 parent" all sub must have - class="child-row-1"

default table

<table id="table">
    <tr class="row-1 odd parent">
      <th class="column-1">st. 3 - 5</th>
      <th class="column-2">Profile</th>
      <th class="column-3">Purpose</th>
    </tr>
    <tr class="row-2 even">
      <td class="column-1">Metal Stamp</td>
      <td class="column-2">Width</td>
      <td class="column-3">Price</td>
    </tr>
    <tr class="row-3 odd">
      <td class="column-1">Circle 3 - 5</td>
      <td class="column-2">28-110</td>
      <td class="column-3">21500</td>
    </tr>
    <tr class="row-4 even">
      <td class="column-1">Circle 3 - 5</td>
      <td class="column-2">115-180</td>
      <td class="column-3">20700</td>
    </tr>
    <tr class="row-5 odd">
      <td class="column-1">Cube 3 - 5</td>
      <td class="column-2">63-80</td>
      <td class="column-3">21500</td>
    </tr>
    <tr class="row-6 even">
      <td class="column-1">Cube 3 - 5</td>
      <td class="column-2">100-220</td>
      <td class="column-3">20700</td>
    </tr>
    <tr class="row-7 odd">
      <td class="column-1">Line 3 - 5</td>
      <td class="column-2">10-50 ? 40-200</td>
      <td class="column-3">27000</td>
    </tr>
</table>

in the end it should look like this:

<table id="table">
    <tr class="row-1 odd parent">
      <th class="column-1">st. 3 - 5</th>
      <th class="column-2">Profile</th>
      <th class="column-3">Purpose</th>
    </tr>
    <tr class="row-2 even child-row-1">
      <td class="column-1">Metal Stamp</td>
      <td class="column-2">Width</td>
      <td class="column-3">Price</td>
    </tr>
    <tr class="row-3 odd child-row-1">
      <td class="column-1">Circle 3 - 5</td>
      <td class="column-2">28-110</td>
      <td class="column-3">21500</td>
    </tr>
    <tr class="row-4 even child-row-1">
      <td class="column-1">Circle 3 - 5</td>
      <td class="column-2">115-180</td>
      <td class="column-3">20700</td>
    </tr>
    <tr class="row-5 odd child-row-1">
      <td class="column-1">Cube 3 - 5</td>
      <td class="column-2">63-80</td>
      <td class="column-3">21500</td>
    </tr>
    <tr class="row-6 even child-row-1">
      <td class="column-1">Cube 3 - 5</td>
      <td class="column-2">100-220</td>
      <td class="column-3">20700</td>
    </tr>
    <tr class="row-7 odd child-row-1">
      <td class="column-1">Line 3 - 5</td>
      <td class="column-2">10-50 ? 40-200</td>
      <td class="column-3">27000</td>
    </tr>
</table>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about table