HTML三级折叠展开表格行向上展开问题修复咨询

核心问题原因 #

• HTML行层级顺序颠倒：高等级父行（level值越小层级越高）应放在子行（level值大）上方，你当前代码是level3在最前、level1在最后，导致展开内容天然在父行上方
• JS查找逻辑错误：使用prevUntil向上查找兄弟元素，应改为nextUntil向下查找父行之后的子行
• 原有代码存在类选择器遗漏.、HTML标签未闭合等小问题，同步修复

修正后的完整代码 #

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body> 
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父行在上，子行依次往下排列 -->
    <tr data-level='1'>
      <td>Main<span class="sign"></span></td>
      <td>18798736</td>                               
    </tr>
    <tr data-level='2'>
      <td>Sup one<span class="sign"></span></td>
      <td>18796789</td>                                      
    </tr>
    <tr data-level='2'>
      <td>Sup two<span class="sign"></span></td>
      <td>18796789</td>                                         
    </tr>
    <tr data-level='3'>
      <td>contractor 1</td>
      <td>18798736</td>                                         
    </tr>
  </tbody>
</table>
</body>

JS代码 #

$("tbody > tr:not([data-level='3'])").addClass("expandable sign folded");
$("tbody > tr:not([data-level='1'])").hide();
// 缩进加在td上兼容所有浏览器
$("tbody > tr td:first-child")
    .css("padding-left", function (index) {
    return 10 * parseInt($(this).parent().data("level"), 10) + "px";
});

function range(lowEnd, highEnd) {
    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 next_level_selector = create_selector(this_level + 1);
    var next_or_lower = name_range(create_selector, this_level + 1, 10);
    var this_or_higher = name_range(create_selector, 0, this_level);
    // 核心修改：prevUntil改为nextUntil，向下查找子行
    var node = $(this).nextUntil(this_or_higher.join(","));
    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();
    }
});

CSS代码 #

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:"-";
    display: inline-block;
    margin-right: 6px;
}
tr.folded .sign:after {
    content:"+";
    display: inline-block;
    margin-right: 6px;
}

内容的提问来源于stack exchange，提问作者Shining