Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categories" are clicked and only show rows of a specific category when that category is selected.

highlightRows = () => {
    let oddRows = document.querySelectorAll('tbody > tr.show')
    oddRows.forEach((row, index)=> {
        if (index % 2 == 0) {
            row.style.background = '#f1f1f1'
        } else {
            row.style.background = '#fff'
        }
    })
}


const filterOptions = () => {
    const option = document.querySelector("#filter").value;
    const selection = option.replace('&', '')
    const rows = document.querySelectorAll("#body1 > tr");
    console.log(rows.length);
    
    rows.forEach(row => {
        let td = row.querySelector("td:last-child");
        let filter = td.innerText.replace('&', '');
        if (filter === selection) {
            row.className = 'show'
        } else {
            row.className = 'hidden'
    }

    });
    highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2em;
  text-align: center;
}
.table-filters a {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  margin-right: 1em;
  display: inline-block;
}
.table-filters a:hover {
  text-decoration: none;
}
.table-filters select {
  background: #fff;

  font-size: 16px;
  font-weight: 500;
  width: 12em;
  height: 2.5em;
}

table.stats {
  background: #fff;
  width: 100%;
  table-layout: fixed;
  border-radius: 6px;
}
tbody tr.show {
  display: table-row;
}
tbody tr.hidden {
 display: none;
}
table.vypis {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table.vypis > caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table.vypis > tr.vypis-riadok {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table.vypis th,
table.vypis td {
  padding: .625em;
  text-align: center;
}

table.vypis th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 800px) {
  table.vypis {
    border: 0;
  }

  table.vypis > caption {
    font-size: 1.3em;
  }
  
  table.vypis > thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.vypis tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table.vypis td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table.vypis td::before {

    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table.vypis td:last-child {
    border-bottom: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
        <select id="filter">
          <option selected value="none">Categories</option>
          <option>Hobby</option>
          <option>Others</option>

          
        </select>
      </div>
      <table class="vypis">
        <caption>Pohyby na účte</caption>
        <thead>
          <tr>
            <th scope="col">Refer</th>
            <th scope="col">Date</th>
            <th scope="col">Price</th>
            <th scope="col">Category</th>
          </tr>
        </thead>
        <tbody id="body1">
          <tr class="vypis-riadok">
            <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
            <td data-label="date">[[X02_riadok_1_datum]]</td>
            <td data-label="price">[[X08_riadok_1_suma]] €</td>
            <td data-label="category">Others</td>
          </tr> 
                    <tr class="vypis-riadok">
            <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
            <td data-label="date">[[X02_riadok_1_datum]]</td>
            <td data-label="price">[[X08_riadok_1_suma]] €</td>
            <td data-label="category">Hobby</td>
          </tr> 
                    <tr class="vypis-riadok">
            <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
            <td data-label="date">[[X02_riadok_1_datum]]</td>
            <td data-label="price">[[X08_riadok_1_suma]] €</td>
            <td data-label="category">Others</td>
          </tr>

javascripthtmljquerycss

Answer №1

When you add the hidden class, remember to remove it when the categories option is clicked. One approach is to iterate through the tr elements, check if they contain the class, and then switch it to show.

Sample Code :

highlightRows = () => {
  let oddRows = document.querySelectorAll('tbody > tr.show')
  oddRows.forEach((row, index) => {
    if (index % 2 == 0) {
      row.style.background = '#f1f1f1'
    } else {
      row.style.background = '#fff'
    }
  })
}


const filterOptions = () => {
  const option = document.querySelector("#filter").value;
  const selection = option.replace('&', '')
  const rows = document.querySelectorAll("#body1 > tr");
  //check if value is not none
  if (option != "none") {
    rows.forEach(row => {
      let td = row.querySelector("td:last-child");
      let filter = td.innerText.replace('&', '');
      if (filter === selection) {
        row.className = 'show'
      } else {
        row.className = 'hidden'
      }

    });
    highlightRows()
  } else {
 //loop though rows
    rows.forEach(row => {
    //check if row has class hidden
      if (row.classList.contains("hidden")) {
        row.className = 'show'//add showclass
      }      
    })
    highlightRows()
  }

};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2em;
  text-align: center;
}

.table-filters a {
  color: #222;
  font-size: 16px;
  font-weight: 500;
  margin-right: 1em;
  display: inline-block;
}

.table-filters a:hover {
  text-decoration: none;
}

.table-filters select {
  background: #fff;
  font-size: 16px;
  font-weight: 500;
  width: 12em;
  height: 2.5em;
}

table.stats {
  background: #fff;
  width: 100%;
  table-layout: fixed;
  border-radius: 6px;
}

tbody tr.show {
  display: table-row;
}

tbody tr.hidden {
  display: none;
}

table.vypis {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table.vypis>caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table.vypis>tr.vypis-riadok {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table.vypis th,
table.vypis td {
  padding: .625em;
  text-align: center;
}

table.vypis th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
  <select id="filter">
    <option selected value="none">Categories</option>
    <option>Hobby</option>
    <option>Others</option>


  </select>
</div>
<table class="vypis">
  <caption>Pohyby na účte</caption>
  <thead>
    <tr>
      <th scope="col">Refer</th>
      <th scope="col">Date</th>
      <th scope="col">Price</th>
      <th scope="col">Category</th>
    </tr>
  </thead>
  <tbody id="body1">
    <tr class="vypis-riadok">
      <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
      <td data-label="date">[[X02_riadok_1_datum]]</td>
      <td data-label="price">[[X08_riadok_1_suma]] €</td>
      <td data-label="category">Others</td>
    </tr>
    <tr class="vypis-riadok">
      <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
      <td data-label="date">[[X02_riadok_1_datum]]</td>
      <td data-label="price">[[X08_riadok_1_suma]] €</td>
      <td data-label="category">Hobby</td>
    </tr>
    <tr class="vypis-riadok">
      <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
      <td data-label="date">[[X02_riadok_1_datum]]</td>
      <td data-label="price">[[X08_riadok_1_suma]] €</td>
      <td data-label="category">Others</td>
    </tr>
  </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for eliminating redundancy in $scope manipulation code within multiple controllers using angularJS

Apologies if this question seems trivial, but I am just getting started with angularJS. I have created two controllers: seekerController and wizardController... Within the wizardController, there is a Scope object called chat, which is being manipulated ...

javascriptangularjsdry

Implementing a jQuery Popup to Show Error Messages

Is there a way to display error messages in a popup and hide all form fields when a success message appears? Currently, I am placing the success message above the form and closing it after the form is submitted. The error message div is placed inside the s ...

jquery

Tips for verifying the HTML5 date format

I am looking to implement the HTML5 date input field <input type='date' name='customDate'> This will allow other users to utilize the built-in datepicker available in their browser. One challenge I have encountered is ensuring ...

javascriptphpjqueryhtmldate

The error message "TypeError: dom.getElementsByTagName is not a function in Node.js" indicates

I have just started learning HTML and web development. I am trying to extract a list of tags from an HTML document but I keep receiving the error message TypeError: dom.getElementsByTagName is not a function. I am making a GET request using axios, then u ...

javascriptnode.jscheerio

Retrieve the initial image from every JSON data point

Searching for a way to fetch the first image from each post in the JSON object? Check out the Tumblr API Documentation Currently, the provided code displays content from only the first post. The goal is to display the first image from all posts. $.ajax({ ...

jqueryajaxjsonapitumblr

Encountering an issue with the npm start command in my React application

After using npx create-react-app basic to create a React app, I navigated to the basic folder and attempted to start it with npm start. However, I encountered the following error: npm start <a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

javascriptreactjsnpmweb-development-servernpm-start

Is there a way to activate an event when using # or @ in a text field on React/Next.js?

I'm in the process of starting a new project and I am thinking about how to incorporate this into react/nextjs. I want to create a user selection or hashtag selection dialog around the textarea, but I haven't been able to find any helpful article ...

javascriptreactjsnext.jsdraftjs

Exploring the bewilderment of retrieving values in a JavaScript

I'm confused about the return value of this code snippet: function foo() var ret = 0; var xhr=send_request( "bla", function() { // perform actions based on AJAX response // set the value of ret based on the response } ); return re ...

javascriptajax

Text superimposed on an image

Hey everyone, so I'm currently working on building my very first website and I decided to start off using a template that I found online. The layout of the pages consists of 2 columns with div tags - one for text on the left side and the other for ima ...

htmloverlapping

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

javascripttypescriptwebpack

The image being displayed is significantly wider than the corresponding HTML element

I'm attempting to display this webpage in PNG format using npm's wkhtmltox: <!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body { padding: 0; width: 340px; } ...

javascripthtmlnode.jswkhtmltoimage

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

Encountering an unusual issue while using a Nav and NavItem with a Checkbox from React Bootstrap. What I've noticed is that when clicking directly on the checkbox instead of the NavItem button, the checkbox does not re-render correctly even though my ...

javascripttwitter-bootstrapreactjstypescriptreact-bootstrap

MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with: <form action="input.php" method="POST"> <input type="text" class="input" name="firstname" placeholder="First Name" required> <input t ...

javascripthtmlcssformsvalidation

Ways to show or conceal content using only CSS

Looking for help with switching content using pure CSS. I'm not very skilled with CSS and would prefer to avoid using JavaScript if possible. Any assistance would be greatly appreciated. Below is a snippet of the code: If A is clicked, toggle-on-con ...

htmlcss

Using an if statement within a map function in a React component

I am facing a challenge with using an if statement inside a map function without changing the return value. Here is my code snippet: this.example = this.state.data.map((item) => { return( <div> {if(1 + 1 == 2){ dat ...

javascriptreactjs

Creating key elements in JavaScript with the push() function

I'm working on a basic shopping cart system using JavaScript (Ionic 2 / Angular). In my PHP code, I have the following: <?php $cart = array( 48131 => array( 'size' => 'STANDARD', 'qty' => ...

javascriptjqueryangularionic-frameworkionic2

Organize all ngDialog instances within a factory and access them through a directive

In order to keep the ngDialogs centralized in one place instead of dispersed, I had the idea of creating a factory named modal.js. This factory would contain a list of all the modals with a switch statement. Here is an example: .factory(&ap ...

javascriptangularjs

Searching for an array of IDs in Mongoose

I have created an API using Express.js and mongoose to find users based on their ids in an array. // Here is the array of user ids const followedIds = follow.map((f) => f.followed); console.log(followedIds); // This will log [ '5ebaf673991fc60204 ...

javascriptapiexpressmongoose

I am experiencing an issue with my date filter where it does not display any results when I choose the same date for the start and end dates. Can anyone help me troub

Having an issue with my custom filter pipe in Angular. When I select the same dates in the start and end date, it doesn't display the result even though the record exists for that date. I've noticed that I have to enter a date 1 day before or ea ...

javascriptangulartypescriptdatetimefilter

The value of `$(this).data('dynamic_id')` is only defined within the `alert` function

Can someone please provide guidance on how to pass dynamically generated IDs from a Rails app to jQuery using the data-attribute? I have encountered an issue where the value returns as undefined unless it is sent to an alert box. I am currently using this ...

jqueryruby-on-railsthiscustom-data-attribute