隐藏父头，如果 tbody 中的所有 tr 都隐藏显示:无

Hide parent thead if ALL tr in tbody are hidden display:none

本文关键字：隐藏 tr 显示 如果 tbody      更新时间：2023-09-26

我需要你的帮助：

问题：

我的表有一个选择过滤器。如果值不同，筛选器将隐藏正文的 tr 行。表头仍显示。

问题：

如果选择过滤器隐藏（显示：无;？）身体的所有 tr，头部也应该隐藏。

守则：

$(document).ready(function(){
    $("select[name='kurs']").click(function() {
        $('tbody').each(function(){
            if ($(this).find("tr:hidden")) {
                $(this).closest(thead).hide();
            }
        });
    });
});

这也将做： 

$(this).parent().find("thead").hide();

示例代码：

function hide() {
$('tbody').each(function(){  
  if($(this).not("tr:hidden").length=1)
    {      
      $(this).parent().find("thead").hide();
    }
});
  
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Table
<table border='1'>
<thead>  
  <tr><td>H1</td><td>H2</td></tr>
</thead>
<tbody>
  <tr style='display:none'><td>a</td><td>b</td></tr>
  <tr style='display:none'><td>a</td><td>b</td></tr>
  <tr style='display:none'><td>a</td><td>b</td></tr>
  <tr style='display:none'><td>a</td><td>b</td></tr>
 </tbody>
</table>
<button onClick='hide()'>Hide</button>

怎么样

$('tbody').each(function(){
    if ($(this).has("> tr:visible").length === 0){
        $(this).closest('table').hide();
    }
});

它会检查tbody中可见tr，如果没有隐藏table。

检查这个小提琴，看看这是否是你想要的。

当选择更改时，它会筛选行。我做了一些事情，可能是也可能不是您可能拥有的过滤方法。重要的是在没有行时关闭头的部分。

$("#filter").change(function () {// Select changes and filters rows of the different tables.
    var class_to_filter = "." + $(this).val();// I'm accessing rows by class in order to close them, you may access them using some other method.
    $.each($(class_to_filter), function (i, item) {// For each one of them, close and check if you have to close thead as well.
        var $tr = $(item).closest('tr'),
            $tbody = $tr.closest('tbody'),
            $thead = $tbody.siblings('thead'),
            numOfVisibleRows;
        $tr.hide();// Hide row.
        numOfVisibleRows = $('tr:visible', $tbody).length;// Number of sibling rows visible.
        if (!numOfVisibleRows) {// if 0, hide thead.
            $thead.hide();
        }
    });
});

希望对您有所帮助。

相关文章：