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

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

.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

Answer 2

为了简化示例，我创建了一个只有2个列的表格。您可以hide()的所有行和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>

.eq（）两个不同值的Filter / Find Element

2 个答案: