Блог

 $("tbody gt; tr:not([data-level='3'])").addClass("expandable sign folded"); $("tbody gt; tr:not([data-level='1'])").hide(); $("tbody gt; tr")  .css("padding-left", function (index) {  return 10 * parseInt($(this).data("level"), 10)   "px"; });  function range(lowEnd, highEnd) {  // assert lowEnd gt;= 0 and highEnd lt; 100  var validation = (lowEnd lt;= highEnd) amp;amp; (lowEnd gt;= 0) amp;amp; (highEnd lt; 100);  if (!(validation)) {  console.assert(validation,   'Function "range" received unlikely values: '    lowEnd   ' and '   highEnd   "...");  } else {  var arr = [];  while (lowEnd lt;= 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; } 

 lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"gt;lt;/scriptgt; lt;bodygt;  lt;tablegt;  lt;theadgt;  lt;trgt;  lt;thgt;Titlelt;/thgt;  lt;thgt;Titlelt;/thgt;  lt;/trgt;  lt;/theadgt; lt;tbodygt; lt;tr data-level='3'gt; lt;tdgt;contractor 1lt;/tdgt; lt;tdgt;18798736lt;/tdgt;  lt;/trgt; lt;tr data-level='2'gt; lt;tdgt;Sup twolt;span class="sign"gt;lt;/spangt; lt;/tdgt; lt;tdgt;18796789lt;/tdgt;  lt;/trgt; lt;tr data-level='2'gt; lt;tdgt;Sup onelt;/tdgt; lt;tdgt;18796789lt;/tdgt;  lt;/trgt; lt;tr data-level='1'gt; lt;tdgt;Mainlt;span class="sign"gt;lt;/spangt; lt;/tdgt; lt;tdgt;18798736lt;/tdgt;  lt;/trgt;