展开和折叠 html 表中 3 级分层行

我在表结构中有一些分层数据，如下所示：（示例 1）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
    A.2.1
    A.2.2
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我希望能够在每个级别内展开和折叠，因此例如，如果我单击 A.2，则子项应该折叠：（示例 2）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我单击 A，它的所有子项都应该折叠：（示例 3）

A 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我再次展开 A，A.2 仍应保持折叠状态（子项隐藏）（示例 4）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我已经尝试了 http://jsfiddle.net/y4Mdy/1124/的代码示例 - 但没有处理三个级别的层次结构。 $（this）.nextTill 似乎工作得很好，但是当下一个 tr 是父行时，它会折叠到下一个子行。此外，如果我折叠第 2 级然后折叠父级，则第 2 级将被隐藏，但第 3 级显示：

A 
    A.1.1 
    A.1.2       
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我也尝试过 http://jsfiddle.net/icc97/XNkbE/- 但是当单击父级别时，子级别不会返回到折叠状态（类似于我上面的示例 4）

谁能帮忙？

提前谢谢。

此解决方案应处理任意数量的级别。

我原来的jsfiddle在这里。我将比这个答案更频繁地更新它。

$("tbody > tr:not([data-level='3'])").addClass("expandable sign folded");
$("tbody > tr:not([data-level='1'])").hide();
$("tbody > tr")
    .css("padding-left", function (index) {
    return 10 * parseInt($(this).data("level"), 10) + "px";
});
function range(lowEnd, highEnd) {
    // assert lowEnd >= 0 and highEnd < 100
    var validation = (lowEnd <= highEnd) && (lowEnd >= 0) && (highEnd < 100);
    if (!(validation)) {
        console.assert(validation, 
                       'Function "range" received unlikely values: ' +
                       lowEnd + ' and ' + highEnd + "...");
    } else {
        var arr = [];
        while (lowEnd <= highEnd) {
            arr.push(lowEnd++);
        }
        return arr;
    }
}
function name_range(fun, lowEnd, highEnd) {
    var arr = range(lowEnd, highEnd);
    jQuery.each(arr, function (index, value) {
        arr[index] = fun(value);
    });
    return arr;
}
function create_selector(level) {
    return "[data-level='" + level + "']";
}
$("tr.expandable").click(function () {
    var this_level = parseInt($(this).data("level"), 10);
    var this_level_selector = create_selector(this_level);
    var next_level_selector = create_selector(this_level + 1);
    var next_or_lower = name_range(create_selector,
    this_level + 1, 10); // TODO: find last level
    var this_or_higher = name_range(create_selector, 0, this_level);
    var node = $(this).prevUntil(this_or_higher.join(","));
    // different behaviour according to state (expanded / folded):
    if ($(this).hasClass("expanded")) {
        $(this).removeClass("expanded").addClass('folded');
        $(node).not("expanded").removeClass("expanded").addClass('folded');
        $(node).filter(next_or_lower.join(",")).hide();
    } else {
        $(this).addClass("expanded").removeClass('folded');
        $(node).filter(next_level_selector).show();
    }
});

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    border-color: gray;
}
tr:not([data-level='3']) {
    cursor:pointer;
    font-weight: bold;
}
tr.expanded .sign:after {
    content:"-";
}
tr.folded .sign:after {
    content:"+";
}
td:first-child {
    padding: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="0">
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
    </thead>
    <tbody>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>
            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Trade<span class="sign"></span>
            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>
            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>
            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Stores<span class="sign"></span>
            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

如果我们单击第一级的元素，我们将隐藏级别 2 和 3 上的所有可见元素。如果第一关的元素已经隐藏，我们使第2关的元素再次可见。

    toggleElement = function(context) {
  let current = context.parentElement
  if (current.className == 'level1') {
    toggleLevel1(current)
  } else if (current.className == 'level2') {
    toggleLevel2(current)
  }
};
toggleLevel1 = function(current) {
  let nextSibling = current.nextElementSibling;
  while (nextSibling && nextSibling.className == 'level2') {
    nextSibling.hidden = nextSibling.hidden ? false : true
    nextSibling = nextSibling.nextElementSibling
    while (nextSibling && nextSibling.className == 'level3') {
      if (!nextSibling.hidden) {
        nextSibling.hidden = nextSibling.hidden ? false : true
      }
      nextSibling = nextSibling.nextElementSibling
    }
  }
};
toggleLevel2 = function(current) {
  let nextSibling = current.nextElementSibling;
  while (nextSibling && nextSibling.className == 'level3') {
    nextSibling.hidden = nextSibling.hidden ? false : true
    nextSibling = nextSibling.nextElementSibling
  }
};

<html>
<header>
  
</header>
<style>
table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    border-color: gray;
}
.level2 td:nth-child(1){
  padding-left: 5px;
}
.level3 td:nth-child(1){
  padding-left: 10px;
}
</style>
<body>
<table border="0">
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
    </thead>
    <tbody>
        <tr class="level1">
            <td onclick="toggleElement(this)">Trade
            </td>
            <td>total1</td>
            <td>total1</td>
            <td>data1</td>
        </tr>
        <tr class="level2">
            <td onclick="toggleElement(this)">sub stores
            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="level3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="level2">
            <td onclick="toggleElement(this)">sub stores
            </td>
            <td>total2</td>
            <td>data2</td>
            <td>data2</td>
        </tr>
        <tr class="level3">
            <td>data3</td>
            <td>data3</td>
            <td>data3</td>
            <td>data3</td>
        </tr>
        <tr class="level1">
            <td onclick="toggleElement(this)">Trade
            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
        <tr class="level2" >
            <td onclick="toggleElement(this)">sub stores3
            </td>
            <td>total3</td>
            <td>data3</td>
            <td>data3</td>
        </tr>
        <tr class="level3">
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
        </tr>
        <tr class="level2" >
            <td onclick="toggleElement(this)">sub stores5
            </td>
            <td>total5</td>
            <td>data5</td>
            <td>data5</td>
        </tr>
        <tr class="level3">
            <td>data6</td>
            <td>data6</td>
            <td>data6</td>
            <td>data6</td>
        </tr>
    </tbody>
</table>
</body>
</html>

由于您只处理嵌套的 table s，因此您可以使用这个：

.CSS：

tbody.collapsed {
    display: none;
}

.JS：

$('thead').click(function(){
        $(this).siblings('tbody').toggleClass('collapsed');
    });

我使用thead和tbody来利用语义。

相关内容

最新更新

热门标签：