Определите, есть ли у <tr>в таблице заданное свойство отображения с помощью jQuery - PullRequest
Новая
       22

Определите, есть ли у <tr>в таблице заданное свойство отображения с помощью jQuery

0 голосов
/ 19 сентября 2018

Когда пользователь выполняет поиск, для каждой строки таблицы (tr), которая не совпадает, устанавливается значение display: none;.
Существует ли способ определить, когда для всех строк таблицы установлено значение display: none;используя jQuery? (имеется в виду, что совпадений не было)

Кроме того, определить, есть ли какие-либо строки таблицы, которые либо вообще не имеют стиля, либо для свойства display установлено значение table-row? (имеется в виду хотя бы одно совпадение)

Я пытаюсь выполнить автоматический способ показать или скрыть форму (#RequestRecipe), в которой пользователь может отправить запрос начто они только что искали.

На данный момент у меня есть кнопка, которую пользователь может нажать, чтобы показать форму.Но автоматический способ дал бы лучший результат .. 

<table class="quicksearch striped" id="recipes">
    <tbody>
        <tr></tr>  /*  state of <tr> when the page is loaded / is a match (visable)  */
        <tr style="display:none"></tr>  /*  not a match (hidden)  */
        <tr style="display:table-row;"></tr>  /*  is a match after it has been hidden due to a no match from a search (visable)  */
    </tbody>
</table>

При использовании быстрого поиска плагин добавляет и изменяет свойство отображения в соответствии с тем, соответствует ли поле поиска содержимому в <tr>.

У меня действительно нет никакого кода для показа / скрытия, кроме того, который действительно показывает / скрывает форму.

$(function(){
    $('#toggle_RequestRecipe').click(function(){
        $(this).closest('tr').fadeOut('slow');
        $('#RequestRecipe').slideToggle();
    });
});

1 Ответ

0 голосов
/ 19 сентября 2018

jQuery имеет псевдоселектор :visible для этого.

https://api.jquery.com/visible-selector/

Обязательно ознакомьтесь с документацией, чтобы узнать, что jQuery считает видимым. 

console.log($('#table1 tr:visible').length);

console.log($('#table2 tr:visible').length);

console.log($('#table3 tr:visible').length);
.hide {
  height: 0;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <tr hidden>
    <td>1</td>
  </tr>
  <tr style="display: none">
    <td>2</td>
  </tr>
  <tr style="visibility: hidden">
    <td>3</td>
  </tr>
</table>

<table id="table2">
  <tr hidden>
    <td>1</td>
  </tr>
  <tr style="display: none">
    <td>2</td>
  </tr>
  <tr class="hide">
    <td>3</td>
  </tr>
</table>

<table id="table3">
  <tr hidden>
    <td>1</td>
  </tr>
  <tr style="display: none">
    <td>2</td>
  </tr>
</table>
...