Question

我被我的桌子困住了。我需要创建切换行功能，但我不知道如何在表中查找子行。有人能帮助我吗？

我有很多行的表＆gt; 500
所有行都有class =“row-1，row-2 ..... row-600 etc”
所有主要行也有class =“parent”

在每个“父”行之间我有6行，所以我需要切换/折叠目的查找父行之间的所有（子）行。并添加类似于前一父行的类。

例如：
父母有class =“row-1 parent”
所有sub必须有 - 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>

Answer 1

jQuery中有一个用于遍历树的nextUntil方法。实际上，您可以使用一堆方法来遍历树，并且可以了解有关它们的更多信息here。

为所有行执行此操作：

选择每个父行$('.parent').each(..)
找到班级名称(row-nn)
将等级(child-row-nn)添加到下一行，直到下一行.parent。

Update on 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);
    }
});

如何使用/ ID在其他行之间查找行，然后添加类

1 个答案: