我需要根據(jù)最后一列制作工作過濾器。最后一列是類別，當(dāng)我按選項(xiàng)>選擇時(shí)，我需要只顯示一個(gè)類別并隱藏其他類別，但現(xiàn)在當(dāng)我單擊時(shí)什么也沒有發(fā)生，也不知道為什么。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); <div class="table-filters">        <select id="filter">          <option disabled selected value="none">Categories</option>          <option>Home</option>          <option>Others</option>          <option>Hobby</option>          <option>Garden</option>        </select>      </div>      <table class="vypis">        <caption>Account</caption>        <thead>          <tr>            <th scope="col">Referencia</th>            <th scope="col">Dátum</th>            <th scope="col">Suma</th>            <th scope="col">Kategória</th>          </tr>        </thead>        <tbody class="body1">          <tr class="vypis-riadok">            <td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>            <td data-label="Dátum">[[X02_riadok_1_datum]]</td>            <td data-label="Suma">[[X08_riadok_1_suma]] €</td>            <td data-label="Kategória">[[kategoria]]</td>          </tr>          </tr>        </tbody>      </table>