单击选项时显示全部

Question

我得到了这个过滤器，一切都很完美。当我按特定类别时，它将仅列出具有该类别的行。但我意识到在单击第一个选项后我不知道如何显示它们。我的目标是。在“类别”上单击“显示所有行”，在特定类别上单击“仅显示特定类别”。

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

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

Answer 1

当您添加hidden类时，因此需要在categories单击选项时删除它，因此一种方法是循环tr并检查 是否tr包含该类，然后将其更改为show.演示代码：highlightRows = () => {&nbsp; let oddRows = document.querySelectorAll('tbody > tr.show')&nbsp; oddRows.forEach((row, index) => {&nbsp; &nbsp; if (index % 2 == 0) {&nbsp; &nbsp; &nbsp; row.style.background = '#f1f1f1'&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; row.style.background = '#fff'&nbsp; &nbsp; }&nbsp; })}const filterOptions = () => {&nbsp; const option = document.querySelector("#filter").value;&nbsp; const selection = option.replace('&', '')&nbsp; const rows = document.querySelectorAll("#body1 > tr");&nbsp; //check if value is not none&nbsp; if (option != "none") {&nbsp; &nbsp; rows.forEach(row => {&nbsp; &nbsp; &nbsp; let td = row.querySelector("td:last-child");&nbsp; &nbsp; &nbsp; let filter = td.innerText.replace('&', '');&nbsp; &nbsp; &nbsp; if (filter === selection) {&nbsp; &nbsp; &nbsp; &nbsp; row.className = 'show'&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; row.className = 'hidden'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; highlightRows()&nbsp; } else {&nbsp;//loop though rows&nbsp; &nbsp; rows.forEach(row => {&nbsp; &nbsp; //check if row has class hidden&nbsp; &nbsp; &nbsp; if (row.classList.contains("hidden")) {&nbsp; &nbsp; &nbsp; &nbsp; row.className = 'show'//add showclass&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; })&nbsp; &nbsp; highlightRows()&nbsp; }};document.getElementById("filter").addEventListener("change", filterOptions);.table-filters {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; margin: 2em;&nbsp; text-align: center;}.table-filters a {&nbsp; color: #222;&nbsp; font-size: 16px;&nbsp; font-weight: 500;&nbsp; margin-right: 1em;&nbsp; display: inline-block;}.table-filters a:hover {&nbsp; text-decoration: none;}.table-filters select {&nbsp; background: #fff;&nbsp; font-size: 16px;&nbsp; font-weight: 500;&nbsp; width: 12em;&nbsp; height: 2.5em;}table.stats {&nbsp; background: #fff;&nbsp; width: 100%;&nbsp; table-layout: fixed;&nbsp; border-radius: 6px;}tbody tr.show {&nbsp; display: table-row;}tbody tr.hidden {&nbsp; display: none;}table.vypis {&nbsp; border: 1px solid #ccc;&nbsp; border-collapse: collapse;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; width: 100%;&nbsp; table-layout: fixed;}table.vypis>caption {&nbsp; font-size: 1.5em;&nbsp; margin: .5em 0 .75em;}table.vypis>tr.vypis-riadok {&nbsp; background-color: #f8f8f8;&nbsp; border: 1px solid #ddd;&nbsp; padding: .35em;}table.vypis th,table.vypis td {&nbsp; padding: .625em;&nbsp; text-align: center;}table.vypis th {&nbsp; font-size: .85em;&nbsp; letter-spacing: .1em;&nbsp; text-transform: uppercase;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="table-filters">&nbsp; <select id="filter">&nbsp; &nbsp; <option selected value="none">Categories</option>&nbsp; &nbsp; <option>Hobby</option>&nbsp; &nbsp; <option>Others</option>&nbsp; </select></div><table class="vypis">&nbsp; <caption>Pohyby na účte</caption>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Refer</th>&nbsp; &nbsp; &nbsp; <th scope="col">Date</th>&nbsp; &nbsp; &nbsp; <th scope="col">Price</th>&nbsp; &nbsp; &nbsp; <th scope="col">Category</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="body1">&nbsp; &nbsp; <tr class="vypis-riadok">&nbsp; &nbsp; &nbsp; <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>&nbsp; &nbsp; &nbsp; <td data-label="date">[[X02_riadok_1_datum]]</td>&nbsp; &nbsp; &nbsp; <td data-label="price">[[X08_riadok_1_suma]] €</td>&nbsp; &nbsp; &nbsp; <td data-label="category">Others</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="vypis-riadok">&nbsp; &nbsp; &nbsp; <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>&nbsp; &nbsp; &nbsp; <td data-label="date">[[X02_riadok_1_datum]]</td>&nbsp; &nbsp; &nbsp; <td data-label="price">[[X08_riadok_1_suma]] €</td>&nbsp; &nbsp; &nbsp; <td data-label="category">Hobby</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="vypis-riadok">&nbsp; &nbsp; &nbsp; <td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>&nbsp; &nbsp; &nbsp; <td data-label="date">[[X02_riadok_1_datum]]</td>&nbsp; &nbsp; &nbsp; <td data-label="price">[[X08_riadok_1_suma]] €</td>&nbsp; &nbsp; &nbsp; <td data-label="category">Others</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>