筛选表并显示匹配结果 - jQuery

Filter table and display matching results - jQuery

本文关键字：结果 jQuery 显示 筛选      更新时间：2023-09-26

目标

我正在尝试创建一个词汇表，其中顶部有按钮 A-Z，当您单击其中一个按钮时，它将对表格进行排序，仅显示包含字母作为第一个字符的表格。

如何调整以下内容以使其执行此操作？

function filter_table(letter) {
    var rows = $('tr[data-filter]');
    console.log("Searching for keywords with ['" + letter + "'] " + "as the first character.");
    rows.hide();
    rows.filter(function() {
        return $(this).data('filter').search(letter) >= 0
    }).show();
}

您正在检查search()的结果是否为 >= 0 ，这将告诉您该字符是否出现在字符串中的任何位置。 search()返回在字符串中找到搜索词的位置。您要检查字符的位置是否正好为 0，这意味着它是字符串的第一个字符。

但是，手动执行此操作可能比委托给另一个函数更容易。

rows.filter(function() {
    return $(this).data('filter')[0] == letter;
}).show();

下面是一个演示：

function filter_table(letter) {
    var rows = $('tr[data-filter]');
    console.log("Searching for keywords with ['" + letter + "'] " + "as the first character.");
    rows.hide();
    rows.filter(function() {
        return $(this).data('filter')[0] == letter;
    }).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-filter="apple">
    <td>
      Apple
    </td>
  </tr>
  <tr data-filter="banana">
    <td>
      Banana
    </td>
  </tr>
  <tr data-filter="canteloupe">
    <td>
      Canteloupe
    </td>
  </tr>
</table>
<button onClick="filter_table('a')">
A
</button>
<button onClick="filter_table('b')">
B
</button>
<button onClick="filter_table('c')">
C
</button>

相关文章：