Question

我需要你的帮助：

问题：

我的桌子有一个选择过滤器。如果值不相同，过滤器会隐藏tbody的tr行。表头仍然显示。

问题：

如果选择过滤器隐藏（显示：无;？）tbody的所有tr，那么thead也应该隐藏。

守则：

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

Answer 1

怎么样

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

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

Answer 2

这也可以：

$(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>

Answer 3

检查此fiddle并查看这是否是您想要的。

当选择更改时，它会过滤行。我做过一些可能会或可能不会像您可能拥有的过滤方法的东西。重要的是当没有行时关闭thead的部分。

$("#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();
        }
    });
});

希望它有所帮助。

如果tbody中的ALL tr被隐藏，则隐藏父级thead：none

3 个答案: