过滤器未显示正确的类别

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而不是 id

const rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"

你的 HTML 代码：

   ...

   </thead>

    <tbody class="body1"> <!--body is using attribute class -->

      <tr class="vypis-riadok">

   ...

你应该做的是使用类查询选择器，更改#为.

const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"

之后你的 javascript 代码应该没问题，现在添加 css 样式show和hidden类

.hidden{

 display: none;

Answer 2

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