展開和在HTML表格的第3級層級行收起

Question

我有一個表結構，所以一些分層數據： （實施例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 

如果我點擊一個，所有的孩子都應該崩潰（例如3）

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

，如果我展開再次，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）.nextUntil似乎很好地工作，但是當下一個tr是父行時，它將被摺疊直到下一個子行。另外，如果我垮了2級，然後摺疊父，第二層次是隱藏的，但第三級顯示：

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）

任何人都可以幫忙嗎？

在此先感謝。

Answer 1

該解決方案應處理任何級別的數量。

我原來的jsfiddle是here。我會比這個答案更經常更新它。

$("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>

Answer 2

既然你只處理嵌套table S，你可以用這一個：

CSS：

tbody.collapsed { 
    display: none; 
} 

JS：

$('thead').click(function(){ 

     $(this).siblings('tbody').toggleClass('collapsed'); 

    }); 

我使用thead和tbody來利用語義。