Mon. Mar 20th, 2023

[ANSWERED] javascript – Show all on option click

By

Nov 19, 2022 css, html, javascript, jquery

Solution 1 :

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>

Problem :

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>

Comments

Comment posted by s.kuznetsov

do you want to show everything when you select the first “Categories” parameter?

Comment posted by 08XI

Yes @sergey kuznetsov

Comment posted by 08XI

this soultion work, but only on desktop version when I resize, so filter stop working on mobile version. @Swati

Comment posted by Swati

Your previous code was working with mobile ? If yes this should also work .

Comment posted by 08XI

yes it was. You can try it when you resize monitor. There was only problem with that “Category” option. But now I desktop version works well, but mobile version is not working anymore

Comment posted by Swati

I have remove that css for

Comment posted by codepen.io/08XI/pen/mdrPOPy

codepen.io/08XI/pen/mdrPOPy

By

Related Post

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022