Question

我有一张表可以自动隐藏较小屏幕上的列。在某些列上，标题跨越两行，如下所示：

<table cellspacing="0">
  <thead>
    <tr>
      <th colspan="4" class="essential">Bestellung</th>
    </tr>
    <tr>
       <th>Nummer</th>
       <th>Datum</th>
       <th class="essential">Menge</th>
       <th class="essential">Wert</th>
   </tr>  
 </thead>
 ...

我有一些逻辑，所以用户可以隐藏/显示他想要的列。我使用它来确保如果第二个标题行中的所有列都被隐藏，第一个标题行中的相应元素也会隐藏，当然反过来=只要切换第二个行元素就显示第一个行元素

var doubles = thead.find( "tr:first-child th, TR:first-child TH" ).not('[rowspan=2]');
if ( thead.find("tr, TR").length > 1 && thead.find("tr:last-child th:visible, TR:last-child TH:visible" ).length === 0 ) {
    doubles.hide();
    } else {
       doubles.show();
       }

：可见选择器适用于较大的屏幕尺寸。在较小的尺寸上，我会在加载时自动隐藏一些列，然后选择器不再起作用。

在上面的例子中，.sesential类是可见的。然而，当我切换任何类时，以下总是返回0：我不明白为什么控制台说0,0,0虽然1,2,3或所有4个元素都可见。

也许有人可以指出我可能的原因。

 console.log( thead.find("tr:last-child th:visible").length );
 console.log( thead.find("tr:last-child th").filter(":visible").length );
 console.log( thead.find("tr:last-child th[display=table-cell]").length );

还有另一种选择可见元素的方法吗？

Answer 1

请尝试使用以下代码：

$.expr[":"].displayed = function(e) { //Custom pseudo:
   return e && $(e).css("display") !== "none";
};
$(function() { //On DOMReady
    var thead = $("thead");
    doubles = thead.find("tr:first-child th, tr:first-child th").not("[rowspan=2]");
    if (thead.find("tr, TR").length > 1 && thead.find("tr:last-child th:displayed, tr:last-child th:displayed").length === 0) {
        doubles.hide();
    } else {
        doubles.show();
    }
});

请注意，最新版本的Sizzle没有:visible。查看JSFiddle here。

选择：带有jquery的可见表格单元格不起作用？

1 个答案: