Show all on option click

user_9437674 0
Viewed 49

I got this filter where everything works perflectly. When I press specific category it will list only rows with that categories. But I realized that I don't know how to show them all after click on first option. My goal is. On "Categories" click show all rows and on specific category click show only specific category.

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>

css html jquery javascript
1 Answers

As you are adding hidden class so need to remove this when categories option is clicked so one way is to loop through tr and check if the tr contains that class and then just change it to show .

Demo 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>

user_106064000
Related