2016-03-09 4 views
0

У меня есть таблица, сгенерированная SQL, которая написана в html с ответом.write. В таблице есть некоторые элементы рекурсии (дочерний родительский элемент), и каждый новый уровень рекурсии фиксируется относительно этой строки с инкрементным классом tally (первый уровень получает class = 1, второй уровень получает class = 2, третий уровень получает class = 3 , и т.д).Как скрыть строки таблицы при нажатии

По умолчанию у меня есть все строки, которые не спрятаны на уровне = 1, и после нажатия на кнопку, чтобы показать следующий уровень вниз (переключить). Эта часть отлично работает, однако, если вы показываете уровень 2, затем показываете уровень 3, а затем скрываете уровень 2 ... уровень 3 все еще отображается (что неверно). Если дочерний класс скрыт, то все родительские классы также должны скрываться.

Мне нужно щелкнуть мышью, если переключить класс, перейти на один класс и убедиться, что он скрыт и все остальные над ним (независимо от того, видимы или скрыты), но при этом разрешить показывать этот родительский класс. Кроме того, я никогда не хочу скрывать уровень 1.

Вот мой jQuery, который не совсем прав (не позволяет отображать уровень 3 и выше). Что не так или что должен мой код, чтобы заставить его работать? Я думаю, что я очень близка. Я считаю, что он переключает уровень 3, а затем код запускается и скрывает его, не позволяя мне видеть что-либо на уровне 3 или выше.

$(document).ready(function() { 
    $('#temp td').click(function() { 
     var clicked = $(this).text(); 
     var level = $(this).closest('tr').attr("class"); 
     $('tr[pn="' + clicked + '"]').toggle(); 

     var currentlevel = parseInt(level); // on click sets recursion level to integer 
     var nextlevel = currentlevel + 1; // on click sets recursion level to current level plus 1 
     var maxlevel = parseInt($('.1').length - 3); // on click determines max level of recursion minus offset 

     if (currentlevel > 1) { // skips this section if clicking on level 1 
      if ($('.' + nextlevel + ':visible').length) { // checks if parents are visible 
       for (nextlevel; nextlevel < maxlevel; nextlevel++) { // cycles through all parent classes above current level 
        $('.' + nextlevel).hide(); // sets parent to hide 
       }; 
      }; 
     }; 
    }); 
}); 
+0

Отключить тему: Я склонен не согласиться с вашей предпосылкой. Наличие рекурсивного краха строк часто оказывается разочаровывающим пользователем, поэтому в некоторых случаях мне приходится несколько раз переходить к одной и той же точке. – isherwood

+0

По теме: Как правило, нет необходимости отслеживать уровни гнездования для достижения этого. Просто используйте отношения потомков, чтобы пересечь DOM. Я был бы рад помочь с демонстрацией JSFiddle (показывая примерную структуру HTML), с которой можно играть. – isherwood

+0

@Isherwood отметил. это используемый просмотрщик, поэтому будет много строк и запутаться, если строки не рухнут. Цель состоит в том, чтобы выполнить поиск части, посмотреть, используется ли она в каком-либо месте, а затем оставить или найти что-то еще. – Nicho247

ответ

0

Got it working.

$(document).ready(function() { 
    $('#temp td').click(function() { 

     var clicked = $(this).text(); 
     var level = $(this).closest('tr').attr("class"); 
     $('tr[pn="' + clicked + '"]').toggle(); 

     var currentlevel = parseInt(level); 
     var nextlevel = currentlevel + 1; 
     var maxlevel = parseInt($('.1').length - 3); 

     if ($('.' + nextlevel + ':visible').length) { 
     }else{ 
      for (nextlevel; nextlevel < maxlevel; nextlevel++) { 
       $('.' + nextlevel).hide(); 
      }; 
     }; 
    }); 
    });