CODEWITHSUNDEEP
javascriptjqueryhtml
user5095359
user5095359

Reputation: 47

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

I am displaying a table based on the dropdown menu selection. I need to show all the columns when select 'all' is chosen (default) and hide an entire column and some rows based upon a criteria as shown below. The part where I hide the status column and some rows based on the criteria works.

However when I click the 'all' option back on the dropdown, I want the table to show all the contents, but when I do .show(), I only get all the unhidden elements. How do I show all the columns from the dropdown selection?

$("#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>

Upvotes: 0

Views: 573

Answers (2)

JoeCodeCreations
JoeCodeCreations

Reputation: 668

Why are you using tables? You should use pure css / divs in my opinion. I would do it like this....

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

});

Here is a JSFIDDLE

Upvotes: 0

Shomz
Shomz

Reputation: 37701

You're hiding .status and .rows, yet you're only showing .status. Show the rows as well:

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

Upvotes: 2

Related Questions