Question

我想过滤HTML表中的td属性，但不返回任何结果。我只想显示包含该值的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(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>

Answer 2

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

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>

如何过滤html table td属性？

2 个答案: