मुझे यह फ़िल्टर मिला है जहाँ सब कुछ पूरी तरह से काम करता है। जब मैं विशिष्ट श्रेणी दबाता हूं तो यह केवल उन श्रेणियों वाली पंक्तियों को सूचीबद्ध करेगा। लेकिन मुझे एहसास हुआ कि पहले विकल्प पर क्लिक करने के बाद मुझे नहीं पता कि उन सभी को कैसे दिखाना है। मेरा लक्ष्य है। "श्रेणियाँ" पर क्लिक करें सभी पंक्तियाँ दिखाएँ और विशिष्ट श्रेणी पर क्लिक केवल विशिष्ट श्रेणी दिखाएँ।

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>
2
08XI 5 पद 2020, 13:21

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि आप hidden वर्ग जोड़ रहे हैं, इसलिए categories विकल्प पर क्लिक करने पर इसे हटाने की आवश्यकता है, इसलिए एक तरीका यह है कि tr के माध्यम से लूप करें और जांचें कि क्या tr में वह वर्ग है और फिर बस इसे show में बदलें।

डेमो कोड :

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>
1
Swati 5 पद 2020, 16:41