过滤/查找 .eq() 两个不同值的元素

Question

我正在尝试过滤一个表格行，该行在一列中具有一个值，而在另一列中具有不同的值。所以逻辑是，如果该列的一行有value1和value2，则隐藏所有其他行。如果没有 value1 和 value2 则全部隐藏。

以下是我已经用jquery尝试过的

var firstDropVal = $('#first .fstselected').text(); //first DropDown Value
var secondDropVal = $('#second .fstselected').text(); // second DropDown Value

// .rows is the class of my table tr
var $rowsNo = $('.rows').filter(function() {
  return $.trim($(this).find('td:visible').eq(0 && 1).text()) !== firstDropVal && secondDropVal
}).hide();

我的表格的 HTML 代码

while($row = mysqli_fetch_array($result)) {

$i++;


 echo "


<tr class='rows' id='rows".$i."'>

<td name='rows".$i."' id='hersteller".$i."' class='text-left'>".$row['Hersteller']."</td>
<td id='artikel".$i."' class='text-left'>".$row['Artikel']."</td>
<td id='mase".$i."' class='text-left'>".$row['Mase']."</td>
<td id='stuecke".$i."' class='text-left'>".$row['Stuecke']."</td>
<td id='herstellerkurz".$i."' class='text-left'>".$row['HerstellerKurz']."</td>
<td id='masekurz".$i."' class='text-left'>".$row['MaseKurz']."</td>
<td id='farbekurz".$i."' class='text-left'>".$row['FarbeKurz']."</td>
<td id='artikelnummer".$i."' class='text-left'>".$row['Artikelnummer']."</td>


</tr>

 "; ```

Answer 1

为了使示例更简单，我创建了一个只有 2 个列的表格。您可以 hide() all rows 和 filter() 基于下拉菜单

$(".filter").change(function() {
  var color = $("#filter-color").val().trim();
  var number = $("#filter-number").val().trim();

  $(".row").hide().filter(function() {
    return (
      color === "" ||
      color === $(this).find("td:eq(0)").text().trim()
    ) && (
      number === "" ||
      number === $(this).find("td:eq(1)").text().trim()
    )
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, tr {
  border : 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

---

另一个选项是使用every() 来检查数组

$(".filter").change(function() {

  var filters = [                    //Put the filter values in an array. Make sure it is in order of the <td>
    $("#filter-color").val().trim(),
    $("#filter-number").val().trim()
  ];

  $(".row").hide().filter(function() {
    return $(this).find("td").get().every(function(o, i) {
      return $(o).text().trim() === filters[i] || filters[i] == "";
    });
  }).show();

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
tr {
  border: 1px solid black;
}

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

<select id="filter-color" class="filter">
  <option value=""></option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="blue">blue</option>
</select>

<select id="filter-number" class="filter">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<hr />

<table>
  <tr>
    <th>Color</th>
    <th>Number</th>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>red</td>
    <td>3</td>
  </tr>
  <tr class="row">
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr class="row">
    <td>green</td>
    <td>1</td>
  </tr>
</table>

Answer 2

这些与您尝试使用它们的方式不同

.eq(0 && 1)
firstDropVal && secondDropVal

由于运算符优先级：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

您需要 4 个单独的测试（还有其他方法，但本质上就是您正在做的）

return 
    $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal
    || $.trim($(this).find('td:visible').eq(0).text()) === firstDropVal
    || $.trim($(this).find('td:visible').eq(1).text()) === secondDropVal