如果沒有表格行可見，則隱藏div

Question

我在頁面上有幾個div，每個div都包含一個表格。 用戶與表交互並隱藏一些行。 如果包含表中的所有錶行都隱藏，我想隱藏包含div。 我如何在jQuery中做到這一點？

.div.mytable 
table 
    tr 
.div.mytable 
table 
    tr 

Answer 1

Demo

這個隱藏你想隱藏的行和隱藏它的父格，如果所有行是隱藏的。

JS

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

    // This hides the nearest <tr> 
    $(this).closest('tr').hide(); 

    // Number of <tr> of it's <table> 
    var tableTrNumber = $(this).closest('table').find('tr').length; 

    // Number of <tr> already hidden of it's <table> 
    var tableTrHiddenNumber = $(this).closest('table').find('tr:hidden').length; 

    // If my tr number are equal to the number of hidden tr then hide the div 
    if(tableTrNumber == tableTrHiddenNumber) 
    { 
     $(this).closest('.mytable').hide(); 
    } 
}); 

各種風格和HTML結構只是向你展示它是如何工作的。隨意適應它，以滿足您的需求。當然，你必須尊重元素的層次結構。

如果你不喜歡hide()功能，你可以把任何你想要的效果，如淡入淡出或手風琴。

希望這可以幫助你。

Answer 2

您可以定位包含分區或把一個班的每一個包含div

<div class="containerDiv"> 
    <table> 
    </table> 
    </div> 

使用簡單的jQuery。先後（）方法

if($(".containerDiv table").has("tr")){ 
    $(this).parent(".containerDiv").hide(); 
} 

把它包在一個功能並在發生交互時調用該函數。