过滤器未显示正确的类别

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

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

Answer 1

问题出在你的查询中，tbody你写的#body1所以它会查询带有 ID 的元素，body1而在你的 html 代码中，tbody是类body1而不是 idconst rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"你的 HTML 代码：&nbsp; &nbsp;...&nbsp; &nbsp;</thead>&nbsp; &nbsp; <tbody class="body1"> <!--body is using attribute class -->&nbsp; &nbsp; &nbsp; <tr class="vypis-riadok">&nbsp; &nbsp;...你应该做的是使用类查询选择器，更改#为.const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"之后你的 javascript 代码应该没问题，现在添加 css 样式show和hidden类.hidden{&nbsp;display: none;

Answer 2

应该是因为我通过ID定义了选择