1

私は自分のテーブルで立ち往生しています。トグル行の作成機能が必要ですが、テーブル内のサブ行を見つける方法がわかりません。誰かが私を助けることができますか？

  1. 500を超える行が多いテーブルがあります
  2. すべての行にはclass="row-1、row-2.....row-600などがあります"
  3. また、すべてのメイン行にもclass="parent"があります

各「親」行の間に6つの行があるので、トグル/折りたたみの目的で、親行間のすべての（サブ）行を見つける必要があります。前の親行のようにIDを持つクラスを追加します。

例：
parent have class = "row-1 parent"
all sub must have --class = "child-row-1"

デフォルトのテーブル

<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>

最終的には次のようになります。

<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>
4

1 に答える 1

1

ツリーをトラバースするためのnextUntilメソッドがjQueryにあります。実際には、ツリーをトラバースするために使用できる方法がたくさんあり、ここでそれらについて詳しく知ることができます。

すべての行に対してこれを行うには：

  1. 各親行を選択します$('.parent').each(..)
  2. クラス名を見つける(row-nn)
  3. (child-row-nn)次の行までクラスを追加し.parentます。

jsfの更新。

$(".parent").each(function() {
    var classes = $(this).attr('class').split(' ');
    var matches = $.grep(classes, function(item, index) {
        return /row-/.test(item);
    });
    if(matches.length == 1) {
        var parent = matches[0];
        var selector = '.' + parent;
        var childClass = 'child-' + parent;
        $(selector).nextUntil('.parent').addClass(childClass);
    }
});
于 2010-04-10T15:46:58.523 に答える