具有多級繼承的表 - JQuery

我有一個項目類和繼承去項目有部分，部分有組，並且組有任務。現在我將所有這些顯示在一個表格中。該表使用此代碼創建。具有多級繼承的表 - JQuery

<table class="table table-condensed table-hover" border="1"> 
    <tr style="background-color: black; color: white"> 
     <th></th> 
     <th>Manual/Group/Section</th> 
     <th>Task</th> 
     <th>Delete</th> 
    </tr> 
    @foreach (Manual manual in ViewBag.mlist) 
    { 
     <tr class="manualHeader no-hover jd-green"> 
      <th style="text-align:center"><input type="checkbox" /></th> 
      <th>Manual Name @manual.name</th> 
      <th></th> 
      <th style="text-align:center"><button>Add Section</button></th> 
     </tr> 
     foreach (Section sections in @manual.sections) 
     { 
      <tr class="sectionHeader no-hover jd-yellow"> 
       <th style="text-align:center"><input type="checkbox" /></th> 
       <th>Section Name : @sections.name</th> 
       <th></th> 
       <th style="text-align:center"><button>Add Group</button></th> 
      </tr> 
      foreach (Group group in @sections.groups) 
      { 
       <tr class="groupHeader no-hover jd-gray"> 
        <th style="text-align:center"><input type="checkbox" /></th> 
        <th>Group Name : @group.name</th> 
        <th></th> 
        <th style="text-align:center"><button>Add Task</button></th> 
       </tr> 
       foreach (Task task in @group.tasks) 
       { 
        <tr> 
         <th style="text-align:center"><input type="checkbox" /></th> 
         <th></th> 
         <th>Task Name:<input type="text" style="width:100%" value="@task.name" name="@task.name" /></th> 
         <th></th> 
        </tr> 
       } 
      } 
     } 
    } 
</table>

腳本我使用處理的觸發包括該代碼

<script> 
    $(document).ready(function() { 
     $(".manualHeader").click(function() { 
      $(this).nextUntil(".manualHeader").toggle(); 
     }); 
     $(".sectionHeader").click(function() { $(this).nextUntil(".manualHeader, .sectionHeader").toggle(); }); 
     $(".groupHeader").click(function() { $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").toggle(); }); 
    }); 
</script>

現在我知道爲什麼它不能正常工作的，當你切換可以說一個組，以便下的所有任務它是隱藏的，然後您切換該組存在的手冊以及除了通過先前單擊該組而隱藏的任務之外的所有內容。我明白爲什麼會發生這種情況，因爲在腳本中使用toggle（）和untilNext（）。我的問題是我如何解決它的某種條件來檢查可見性或什麼。

來源

2016-02-19 Evan Feller

<script> 
    $(document).ready(function() { 
     $(".manualHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader").each(function() { 
        if ($(this).is(".sectionHeader")) 
         $(this).show(); 
       }); 
      else 
       $(this).nextUntil(".manualHeader").hide(); 
     }); 
     $(".sectionHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader, .sectionHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader, .sectionHeader").each(function() { 
        if ($(this).is(".groupHeader")) 
         $(this).show(); 
       }); 
      else 
       $(this).nextUntil(".manualHeader, .sectionHeader").hide(); 
     }); 
     $(".groupHeader").click(function() { 
      var anyHidden = false; 
      var allHidden = true; 
      $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").each(function() { 
       if ($(this).is(":visible")) 
        allHidden = false; 
      }); 
      if (allHidden) 
       $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").show(); 
      else 
       $(this).nextUntil(".manualHeader, .sectionHeader, .groupHeader").hide(); 
     }); 
    }); 
</script>

這工作做的他有什麼事要做

來源

2016-02-19 18:57:14

具有多級繼承的表 - JQuery

回答

相關問題