Выбор: видимая ячейка таблицы с jquery не работает? - PullRequest
Новая
       15

Выбор: видимая ячейка таблицы с jquery не работает?

2 голосов
/ 21 февраля 2012

У меня есть таблица, которая автоматически скрывает столбцы на маленьких экранах.В некоторых столбцах заголовок занимает две строки, например так: 

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

Селектор : видимый работает нормально на экранах большего размера.При меньшем размере я автоматически скрываю некоторые столбцы при загрузке, а затем селектор больше не работает.

В приведенном выше примере видны классы .essential.Тем не менее, когда я переключаю любой из классов, следующее всегда возвращает 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 );

Есть ли другой способ выбора видимых элементов?

1 Ответ

0 голосов
/ 18 ноября 2012

Попробуйте вместо этого следующий код: 

$.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 здесь .

...