Как отфильтровать html атрибут таблицы td?

Question

Я хочу отфильтровать атрибут td в моей таблице HTML, но он не возвращает никаких результатов.Я просто хочу показать атрибут значения данных tr, который содержит значение.не возвращает результат, как я хочу сейчас

"Мне жаль этого английского"

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>