javascript - 运行以下 javascript 后搜索字段不起作用

Question

  <div class="row col-lg-8  col-md-12 col-sm-12 mt-2">
    <label class="switch ml-2 mr-2">
      <input type="checkbox" id="switch-exp" value='off'>
      <span class="slider slider2 round"></span>
    </label>
    <h5 class="mr-3 mt-2" style="font-size: 20px;">Abonos vencidos</h4>
      <br>
    <label class="switch switch-close ml-2 mr-2">
      <input type="checkbox" id="switch-close" checked value='on'>
      <span class="slider round"></span>
    </label>
    <h5 class="mt-2" style="font-size: 20px;">Abonos por vencer</h4>
    </div>
  <!-- butt

<span class="counter pull-top"></span>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover border results table-striped mb-0">
<thead>
  <tr>
      <th></th>
      <th>Nombre / Apellido</th>
      <th>Nro documento</th>
      <th>Nro de teléfono</th>
      <th>horario</th>
      <th>Fecha vencimiento</th>
      <th>Note</th>
  </tr>
  <tr class="warning no-result table-danger">
    <td colspan="7" style="font-size: 20px; text-align: center;"><i class="fa fa-warning"></i> sin resultados</td>
  </tr>
</thead>
<tbody>
  {% if customers %}
  {% for customer in customers %}
  <tr class="table-{{customer.category}} {{customer.category}}">
    {% if customer.user.image %}
    <th scope="row"><a href="{% url 'core:user_detail' customer.user.id %}"><img src="{{customer.user.image.url}}" alt="customer-img" style="width: 50px; height: 50px;"></a></th>
    {% else %}
    <th scope="row"><a href="{% url 'core:user_detail' customer.user.id %}"><img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Default-welcomer.png" alt="customer-img" style="width: 50px; height: 50px;"></a></th>
    {% endif %}
    <td>{{customer.user.first_name}}/{{customer.user.last_name}}</td>
      <td>{{customer.user.id}}</td>
      <td>{{customer.user.phone_no}}</td>
      <td>{{customer.user.time}}</td> 
      <td>{{customer.expiration_date.date}}</td>
      <td>{{customer.user.note}}</td>
  </tr>
  {% endfor %}
  {% else %}
    <tr class="table-{{customer.category}}">
      No hay clientes disponibles
    </tr>
    {% endif %}
</tbody>
</table>
</div>

document.querySelectorAll('.switch').forEach(switchs => switchs.addEventListener('click',(event)=>{
    if(event.target.id === 'switch-close'){
        if (event.target.value === 'off'){
            event.target.value='on';
            document.querySelectorAll('#danger').forEach(items => items.style.display='none');
            document.querySelectorAll('#warning').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#success').forEach(items => items.style.display='none');
        }
        else if (event.target.value === 'on'){
            event.target.value = 'off';
            document.querySelectorAll('#danger').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#success').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#warning').forEach(items => items.style.display='table-row');
        }
    }
    else if (event.target.id==='switch-exp'){
        if (event.target.value === 'off'){
            event.target.value='on';
            document.querySelectorAll('#danger').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#warning').forEach(items => items.style.display='none');
            document.querySelectorAll('#success').forEach(items => items.style.display='none');
        }
        else if (event.target.value === 'on'){
            event.target.value = 'off';
            document.querySelectorAll('#danger').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#success').forEach(items => items.style.display='table-row');
            document.querySelectorAll('#warning').forEach(items => items.style.display='table-row');
        }
    }
}) )

这是一个健身房管理系统，我有表格和从表格中搜索数据的搜索栏，并且有两个开关显示过期的会员用户和即将过期的会员用户

当我在搜索框中搜索时，表格正常工作根据搜索字段输入找到的数据并且所有表格行都消失了，但是只要我单击任何开关按钮，找到的搜索字段数据但所有其他行都不会消失仍然在屏幕上。javascript 在下面的下方 javascript 不适用于搜索字段，它适用于我单击的开关，而不是搜索的数据显示，但未删除其他未搜索的字段。

标签： javascripthtmlcss