Question

我尝试根据用户在搜索框中键入的内容创建一种突出显示表行的方法。它似乎只有在我将表格单元格的整个文本键入搜索框时才有效，而不是只键入其中的一部分。这是我的示例表格行：

<tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
</tr>

//jquery code
$('td').each(function(i,td){
  $(td).filter(function(){return $(this).text().toLowerCase() == s;}).closest('tr').css('background-color','#ff0000');
}));

这不是确切的代码，而是我的副本＆amp;粘贴不起作用。如果我搜索＆＃34; ABB＆＃34;，它将使用提供的颜色突出显示该行。但是，如果我搜索＆＃34; COM＆＃34; （公司），没有突出显示。

如果我搜索＆＃34; COMPANY LOCAL＆＃34;然后它工作。所以看起来搜索没有进行部分搜索。如何让它与部分搜索一起使用？

Answer 1

我更新了代码以使用:contains选择器的区分大小写搜索，而不是.each与indexOf一起使用，请参阅此link以获取完整详细信息。

主要原因是你正在使用.each并且如果匹配的td是第一个td，而tds的其余部分没有匹配的字符或输入的单词它将隐藏它的输入框。

也许这可以帮助您使用tds

中给定文本的indexOf

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function(elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});
$(document).on('keyup', '#search', function() {
  let val = $(this).val();
  $('tr>td:not(:contains(' + val + '))').closest('tr').css('display', 'none');
  $('tr>td:contains(' + val + ')').closest('tr').css('display', 'block');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="search">
<table>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>

  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;"> pakistan</td>
  </tr>
</table>

搜索表格单元格的jQuery过滤器仅适用于某些项目，但不适用于所有项目

1 个答案: