在hide()之后显示所有列在Jquery中不起作用

Showing all columns after hide() is not working in Jquery

本文关键字：Jquery 不起作用 显示 hide 之后      更新时间：2023-09-26

我正在显示基于下拉菜单选择的表。当选择"all"(默认)时，我需要显示所有列，并根据如下所示的标准隐藏整个列和一些行。我根据条件隐藏状态列和一些行的部分有效。

但是，当我单击下拉菜单上的'all'选项时，我希望表显示所有内容，但是当我执行.show()时，我只获得所有未隐藏的元素。如何显示下拉选择中的所有列?

$("#dropdownselect").change(function () {
  var value = this.value;
  if (value == "open") {
    $('.status').hide();
    $('.rows').each(function(index, value) {
      if ($(this).find('.status').text() == "COMPLETE") {
        $(this).hide();
      }
    });
  }
  if (value == "all") {
    $('.status').show();  //does not work
    //or
    $('#table').show(); //does not work
    //or
     $('.rows').show(); $('.status').show() //does not work
  }
});
HTML 

<select id="dropdownselect">
  <option id="all" value="all">All</option>
  <option id="open" value="open">Open</option>
 </select>
<div id="table">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th class="id_task">ID</th>
        <th class="id_task">Task</th>
        <th class="status">Status</th>
      </tr>
     </thead>
     <tbody>
     {{#.}}
     <tr class="rows">
       <td class="id_task">{{id}}</td>
       <td class="id_task">{{name}}</td>
       <td class="status">{{completed}}</td>
     </tr>
     {{/.}}
   </tbody>
 </table>
</div>

您隐藏了.status和.rows，但您只显示.status。同时显示行:

$('.rows').show();

为什么要使用表格?在我看来，你应该使用纯css/div。我会这样做....

HTML 

<select id="dropdownselect">
  <option value="all">All</option>
  <option value="open">Open</option>
 </select>
<br />
<div style="width:400px;height:auto;display:inline;margin-top:100px;">
    <div class="columns">ID</div>
    <div class="columns">Task</div>
    <div id ="status"class="columns status">Status</div>
    <br />
     <div class="columns">123</div>
    <div class="columns">sample_task</div>
    <div class="columns status">Off</div>
    <br />
</div>
CSS 

.columns {width:150px;height:auto;display:inline-block; }
JQUERY 

$("#dropdownselect").change(function () {
  var value = $('#dropdownselect').val();

  if (value == "open") {
    $('.status').hide();
  }
  if (value == "all") {
    $('.status').show(); 
  }
});

这是一个JSFIDDLE

相关文章：