jQuery修改表搜索答案

【问题标题】：JQuery modification to table searchjQuery修改表搜索
【发布时间】：2018-05-27 17:36:37
【问题描述】：

我目前有 JQuery 代码来搜索第一列上的表并按行排序。但是，它包含了我们希望从搜索中排除的其他注释信息，因此搜索仅限于系统名称信息。

SearchFilter.customfilter = function(searchInput, table) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(searchInput);
  filter = input.value.toUpperCase();
  table = document.getElementById(table);
  tr = table.getElementsByTagName("tr");
  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerText.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

这是正在搜索的 HTML 表格的示例行：

      <tr>
        <td><a href="site.html">System Name</a>
          <p class="tablenote"><small>Note: System note information. </small></p>
        </td>
        <td>N/A</td>
        <td>N/A</td>
      </tr>

有没有什么好办法可以修改jquery代码，把tablenote信息排除在搜索之外，比如排除那个tablenote类或者排除小文本？

【问题讨论】：

so.... 只看锚标签的内容。您不能只说“获取除特定子元素内部的所有内部文本”。要获得该结果，您必须改为遍历所有子节点，然后过滤掉您不想要的节点，并在剩余的节点中搜索。对于每个单元格。每一行。
如何只查看anchor标签的内容？你能推荐一些具体的代码吗？
没有。这只是 dom 遍历。
好的。您或其他人能否指出一些可以指导我融入隔离锚标记概念的材料？

标签： jquery html html-table

【解决方案1】：

您可以使用 jQuery 的 .filter()（与 :contains 选择器一起）过滤掉任何包含 .tablenote 类的元素内的结果。关键代码类似于：

var inputText = "Joel";

var $matches = $('.row').find(':contains(' + inputText + ')').filter(function(){
    // only include matches that are *not* inside an .info element
    return $(this).closest('.tablenote').length == 0;
});

var rowContainsInput = ($matches.length > 0);

所以这实质上是说“告诉我这一行是否包含输入文本，但如果它在 .tablenote 元素内，则不。

见我的JSFiddle here。

注意：但是，如果您首先可以控制标记，最好将一个类添加到系统名称锚点（如<a href="..." class="system-name">System Name</a>），然后专门针对@ 987654330@。或者更好的是，最好使用如下数据属性标记系统名称锚点：<a href="..." data-system-name>System Name</a>，然后您可以将其定位为：$row.find('[data-system-name]')。

【讨论】：