修复表格过滤器

Question

我在尝试修复用于我网站中表格的过滤器时遇到问题。
问题是我在表格的每一列中放置了一个过滤器，以便用户可以过滤所需的类别。

这里我有两个不同的问题：

1. 当我对包含数字的列使用过滤器时（例如，如果我想过滤所有 20 厘米长的框），有时它会从另一列中获取该值并显示它（例如，它显示那些有 20 厘米深度但长度不同的盒子）。有没有办法避免这种情况并使每个过滤器仅使用其列的结果？
2. 过滤后，当我想改变过滤器的值来寻找其他结果时，并没有带来任何结果。这似乎是一个错误，或者无法正常工作的东西，我不知道如何修复。

这是我的网站，您可以在其中查看表格并查看我正在谈论的错误：http://kickads.mobi/sipea/canastos_cajones.html

当您想再次查看所有行时，过滤器也是空的。 下拉菜单中不显示任何文本。

function filterText(select) {
  var rex = new RegExp($(select).val());
  if (rex == "/all/") {
    clearFilter()
  } else {

    $('.content:visible').filter(function() {
      return !rex.test($(this).text());
    }).hide();
  }
}

function clearFilter() {
  $('.filterText').val('');
  $('.content').show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabla">
  <tr>
    <th>Código</th>
    <th>Descripción</th>
    <th>Medidas (mm)
      <select class='filterText' style='background- 
       color: #d9232d; margin-top: 5px; margin-bottom: 5px; 
      display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='1000x400x50'>1000x400x50</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Capacidad de carga (kg./m2)
      <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom: 
      5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='500'>500</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Color
      <select class='filterText' style='background-color: 
       #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='Blanco'>Blanco</option>
        <option value='Negro'>Negro</option>
        <option value='all'>Todos</option>
      </select>
    </th>
    <th>Material
      <select class='filterText' style='background-color: 
       #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
        <option disabled selected>Filtro</option>
        <option value='Virgen'>Virgen</option>
        <option value='Reciclado'>Reciclado</option>
        <option value='all'>Todos</option>
      </select>
    </th>
  </tr>

  <tr class="content">
    <td>SP0125BL</td>

    <td>Piso plástico relleno</td>

    <td>1000x400x50</td>

    <td>500</td>

    <td>Blanco</td>

    <td>Virgen</td>
  </tr>

  <tr class="content">
    <td>SP0125NE</td>

    <td>Piso plástico relleno</td>

    <td>1000x400x50</td>

    <td>500</td>

    <td>Negro</td>

    <td>Reciclado</td>
  </tr>
</table>

Answer 1

而不是使用：

$('.content:visible').filter(function() {

您可以直接对列进行操作：

var idx = $(select).closest('th').index() + 1; // get current column index....
$('.content:visible td:nth-child(' + idx + ')').filter(function() {

function filterText(select)
{
    var rex = new RegExp($(select).val());
    if(rex =="/all/"){
        clearFilter();
    }else{
        var idx = $(select).closest('th').index() + 1;
        $('.content:visible td:nth-child(' + idx + ')').filter(function() {
            return !rex.test(this.textContent.trim());
        }).closest('tr').hide();
    }
}

function clearFilter() {
    $('.filterText').val('Filtro');
    $('.content').show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="tabla">
    <tr>
        <th>Código</th>
        <th>Descripción</th>
        <th>Medidas (mm) <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option
                    value='1000x400x50'>1000x400x50
            </option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Capacidad de carga (kg./m2) <select class='filterText' style='background-color: #d9232d; margin-top: 5px; margin-bottom:
  5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='500'>500</option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Color <select class='filterText' style='background-color:
   #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='Blanco'>Blanco</option>
            <option value='Negro'>Negro</option>
            <option value='all'>Todos</option>
        </select></th>
        <th>Material <select class='filterText' style='background-color:
   #d9232d; margin-top: 5px; margin-bottom: 5px; display:inline-block' style='display:inline-block' onchange='filterText(this)'>
            <option disabled selected>Filtro</option>
            <option value='Virgen'>Virgen</option>
            <option value='Reciclado'>Reciclado</option>
            <option value='all'>Todos</option>
        </select></th>
    </tr>
    <tr class="content">
        <td>SP0125BL</td>
        <td>Piso plástico relleno</td>
        <td>1000x400x50</td>
        <td>500</td>
        <td>Blanco</td>
        <td>Virgen</td>
    </tr>
    <tr class="content">
        <td>SP0125NE</td>
        <td>Piso plástico relleno</td>
        <td>1000x400x50</td>
        <td>500</td>
        <td>Negro</td>
        <td>Reciclado</td>
    </tr>
</table>