如何过滤 html table td 属性？答案

【问题标题】：How to filter html table td attribute?如何过滤 html table td 属性？
【发布时间】：2019-11-10 10:55:11
【问题描述】：

我想过滤我的 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>

【问题讨论】：

我通常不是一个批评别人英语水平的人，但我完全无法理解这一点。如果有人可以对此进行解码，请编辑问题。
你能告诉我你需要什么吗？您的代码也令人困惑。 ID 不存在于 HTML 代码中
我想过滤我的 HTML 表格中的 td 属性值
他想隐藏每个没有给定属性值的 td 的 tr
您能否编辑问题以给出预期结果？

标签： javascript jquery html filter attributes

【解决方案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>

【讨论】：

调用函数filterRows(9);但现在显示 2. 和 3. line(tr)
是的，但那是由于单元格属性中的拼写错误。你写了dat-value而不是data-value，我把它复制到我的sn-p id并在我的回答中纠正了它
我的意思是不为 filterRows(9) 返回任何结果；
虽然filterRows(9) 显示行[[JJJ][55544444][London][MMM]]
好的，但我想像 $("td[data-value]:contains('9')" ) 返回两行

【解决方案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>

【讨论】：