Question

我在页面上有几个div，每个div包含一个表。用户与表交互并隐藏一些行。如果隐藏包含表中的所有表行，我想隐藏包含div。我怎么能在jQuery中做到这一点？

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

Answer 1

Demo

如果隐藏了所有行，则会隐藏您要隐藏的行并隐藏它的父div。

<强> 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上放置一个类

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

使用简单的jQuery .has（）方法

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

将其包裹在一个函数中，并在交互发生时调用该函数。

如果没有可见的表行，则隐藏div

2 个答案: