Question

我有一个使用jQuery过滤结果的选择菜单。我想在结果为空时隐藏整个表（隐藏所有tbody内容）。所以基本上，thead需要隐藏。这是我到目前为止所做的：

jQuery( document ).ready( function( $ ) {
function calculate() {  

$('tbody tr').show();
var sel_day = $('select[name="day"] option:selected').text();
var sel_time = $('select[name="time"] option:selected').text();
var sel_language = $('select[name="language"] option:selected').text();

if(sel_day == 'Day' && sel_language == 'Language' && sel_time == 'Time') {
    return; }   

$('tbody tr').each(function() {
    var col_day = $(this).find('td').first();
    var col_language = $(this).find('td').eq(1);
    var col_time = $(this).find('td').eq(2);

    if(col_day.text() !== sel_day && sel_day !== 'Day') {
        $(this).hide();}           

  if(col_language.text() !== sel_language && sel_language !== 'Language') {
           $(this).hide();}        

     if(col_time.text() !== sel_time && sel_time !== 'Time') {
        if($(this).is(':visible')) {
            $(this).hide();}

                 }  }); }      

$('select[name="day"]').change(function() {
calculate();  });

$('select[name="language"]').change(function() {
calculate(); });

$('select[name="time"]').change(function() {
calculate();  }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day" class="form-control selectpicker">
<option value="">Day</option>
<option value="">Tuesday</option>
<option value="">Wednesday</option>
<option value="">Thursday</option>
<option value="">Friday</option>
<option value="">Saturday</option>
<option value="">Sunday</option>
</select>

<select name="language" class="form-control selectpicker">
<option value="">Language</option>
<option value="">English</option>
<option value="">French</option>
</select>

<select name="time" class="form-control selectpicker">
<option value="">Time</option>
<option value="">11:00</option>
<option value="">1:00</option>
<option value="">5:00</option>
   <option value="">5:30</option>

</select>    
<table width="100%" cellspacing="0" cellpadding="5">

<thead>
<tr>
<th bgcolor="#efefef" width="30%"><strong>Day</strong></th>
<th bgcolor="#efefef" width="40%"><strong>Language</strong></th>
<th bgcolor="#efefef" width="30%"><strong>Time</strong></th>
</tr>
</thead>
<tbody>
<tr>
 <td>Monday</td>
 <td>English</td>
 <td>1:00</td>
 </tr>
<tr>
<td>Tuesday</td>
<td>English</td>
<td>11:00</td>
</tr>
<tr>
<td>Saturday</td>
<td>French</td>
<td>5:00</td>
</tr>
</tbody>
</table>

Answer 1

添加另一个函数以检查是否有任何行可见。如果没有则隐藏整个表格。此函数将使用:visible选择器仅获取可见的行，0表示所有行都被隐藏。就这么简单。

并且不要忘记每个.show()函数调用的calculate表。

＆＃13;

jQuery(document).ready(function($) {
  function calculate() {
    $('table').show();
    $('tbody tr').show();
    var sel_day = $('select[name="day"] option:selected').text();
    var sel_time = $('select[name="time"] option:selected').text();
    var sel_language = $('select[name="language"] option:selected').text();

    if (sel_day == 'Day' && sel_language == 'Language' && sel_time == 'Time') {
      return;
    }

    $('tbody tr').each(function() {
      var col_day = $(this).find('td').first();
      var col_language = $(this).find('td').eq(1);
      var col_time = $(this).find('td').eq(2);

      if (col_day.text() !== sel_day && sel_day !== 'Day') {
        $(this).hide();
      }

      if (col_language.text() !== sel_language && sel_language !== 'Language') {
        $(this).hide();
      }

      if (col_time.text() !== sel_time && sel_time !== 'Time') {
        if ($(this).is(':visible')) {
          $(this).hide();
        }

      }
    });
  }

  $('select[name="day"]').change(function() {
    calculate();
    checkIfEmpty();
  });

  $('select[name="language"]').change(function() {
    calculate();
    checkIfEmpty();
  });

  $('select[name="time"]').change(function() {
    calculate();
    checkIfEmpty();
  });
});

function checkIfEmpty() {
  if ($('tbody tr:visible').length == 0) {
    $('table').hide();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day" class="form-control selectpicker">
  <option value="">Day</option>
  <option value="">Tuesday</option>
  <option value="">Wednesday</option>
  <option value="">Thursday</option>
  <option value="">Friday</option>
  <option value="">Saturday</option>
  <option value="">Sunday</option>
</select>

<select name="language" class="form-control selectpicker">
  <option value="">Language</option>
  <option value="">English</option>
  <option value="">French</option>
</select>

<select name="time" class="form-control selectpicker">
  <option value="">Time</option>
  <option value="">11:00</option>
  <option value="">1:00</option>
  <option value="">5:00</option>
  <option value="">5:30</option>

</select>
<table width="100%" cellspacing="0" cellpadding="5">

  <thead>
    <tr>
      <th bgcolor="#efefef" width="30%"><strong>Day</strong>
      </th>
      <th bgcolor="#efefef" width="40%"><strong>Language</strong>
      </th>
      <th bgcolor="#efefef" width="30%"><strong>Time</strong>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>English</td>
      <td>1:00</td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td>English</td>
      <td>11:00</td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td>French</td>
      <td>5:00</td>
    </tr>
  </tbody>
</table>

＆＃13;

修改

检查所有表格：

function checkIfEmpty() { 
    $('table').each(function() { 
        if ($(this).find('tbody tr:visible').length == 0) { 
            $(this).hide() 
        } 
    }); 
}

当选择更改功能的所有结果都隐藏在tbody中时隐藏表

1 个答案:

修改