如何过滤html表td属性？

Question

我想过滤HTML表中的td属性，但没有返回任何结果。我只想显示包含该值的tr data-value属性。不会返回我现在想要的结果

“对此我很抱歉，英语”

​

function Search() {
  var value = $('#searchbar-4').val().toLowerCase();
  if (value != "") {
    $("#grid-4 tbody tr").each(
      function() {
        var r = $(this).find("td[data-value*='" + value + "']");
        if (r > -1) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
  } else {
    ...
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tb1" class="all-table">
  <thead>
    <tr>
      <th class="td-fixed">Facility name</th>
      <th class="td-fixed2">Phone #</th>
      <th>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-value="5" class="td-fixed">CCC</td>
      <td data-value="4" class="td-fixed2">00001111</td>
      <td data-value="2">Amsterdam</td>
      <td data-value="6">GGG</td>
    </tr>
    <tr>
      <td data-value="8" class="td-fixed">JJJ</td>
      <td dat-value="9" class="td-fixed2">55544444</td>
      <td data-value="55">London</td>
      <td data-value="15">MMM</td>
    </tr>
    <tr>
      <td data-value="14" class="td-fixed">AAA</td>
      <td data-value="19" class="td-fixed2">33332222</td>
      <td data-value="20">Paris</td>
      <td data-value="18">RRR</td>
    </tr>
  </tbody>
</table>

​

Answer 1

我终于做到了，但我不确定这是不是最好的方法。

​

function FilterRows(event) {
            var value = event.value.toLowerCase();
            var rows = $('#tb1 tbody tr');
            rows.hide();
            rows.each(function() {
                var row = $(this);
                var cells = $(this).find('td');
                cells.each(function() {
                    var val = $(this).attr('data-value');
                    if (val) {
                        if (val.toString().toLowerCase().indexOf(value) > -1) {
                            row.show();
                        }
                    }

                });
            });
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<input onkeyup="FilterRows(this)" placeholder="Ara" />

<table id="tb1" class="all-table">
<thead>
    <tr>
        <th class="td-fixed">Facility name</th>
        <th class="td-fixed2">Phone #</th>
        <th>City</th>
        <th>Speciality</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td data-value="CCC" class="td-fixed">CCC</td>
        <td data-value="00001111" class="td-fixed2">00001111</td>
        <td data-value="Amsterdam">Amsterdam</td>
        <td data-value="GGG">GGG</td>
    </tr>
    <tr>
        <td data-value="JJJ" class="td-fixed">JJJ</td>
        <td data-value="55544444" class="td-fixed2">55544444</td>
        <td data-value="London">London</td>
        <td data-value="MMM">MMM</td>
    </tr>
    <tr>
        <td data-value="AAA" class="td-fixed">AAA</td>
        <td data-value="33332222" class="td-fixed2">33332222</td>
        <td data-value="Paris">Paris</td>
        <td data-value="RRR">RRR</td>
    </tr>
</tbody>

​

Answer 2

选择所有行，隐藏它们，按给定值过滤，并显示过滤后的列表：

function filterRows(myVal) {
  var rows = $('#tb1 tbody tr');
  rows.hide();
  var filteredRows = rows.filter(function() {
    var cells = $(this).find('td');
    return cells.filter(function(){
      return $(this).data('value') === myVal;
    }).length > 0;
  });
  filteredRows.show();
 }
 filterRows(55);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tb1" class="all-table">
  <thead>
    <tr>
      <th class="td-fixed">Facility name</th>
      <th class="td-fixed2">Phone #</th>
      <th>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-value="5" class="td-fixed">CCC</td>
      <td data-value="4" class="td-fixed2">00001111</td>
      <td data-value="2">Amsterdam</td>
      <td data-value="6">GGG</td>
    </tr>
    <tr>
      <td data-value="8" class="td-fixed">JJJ</td>
      <td data-value="9" class="td-fixed2">55544444</td>
      <td data-value="55">London</td>
      <td data-value="15">MMM</td>
    </tr>
    <tr>
      <td data-value="14" class="td-fixed">AAA</td>
      <td data-value="19" class="td-fixed2">33332222</td>
      <td data-value="20">Paris</td>
      <td data-value="18">RRR</td>
    </tr>
  </tbody>
</table>

​