jQuery Alpabetical 按名称在表格、A、B、C 等列表中过滤答案

【问题标题】：jQuery Alpabetical Filter by name within a table, A,B,C etc listjQuery Alpabetical 按名称在表格、A、B、C 等列表中过滤
【发布时间】：2013-03-27 15:09:09
【问题描述】：

我有一个工作演示，但仅适用于列表视图，我需要能够单击顶部的 A、B、C 等列表，然后按表格中的联系人姓名进行过滤。

因此，一旦您单击 A，它将显示表格中以“A”开头的所有名称。

正如我提到的，它适用于列表视图，但不确定如何让它在表格中工作？

http://jsfiddle.net/37UxT/1/

希望有人可以提供帮助。它基于来自http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx 的插件不知道在哪里或如何手动执行此操作，因为它对 jQuery 来说是相当新的。

$('ul.list-nav').listnav({         
    includeAll: false,                 
    noMatchText: 'Sorry, nothing matched this filter, please try another letter.', 
        includeAll: true, 
    initLetter: 'n', 
    showCounts: false                
});

谢谢

【问题讨论】：

这是我发现的jsfiddle.net/hDxzP/76

标签： jquery html css filter

【解决方案1】：

我相信市面上有许多“表格排序器”插件，但这个简短的代码可以实现您正在寻找的东西

脚本

     var alphas = 'abcdefghijklmnopqrstuvwxyz';
     $(document).ready(function () {
        var tmp = '';
        for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;';
        $('#table_filter').append(tmp);

        $('#table_filter a').click(function () {

           if ($(this).attr('id') == 'show_all') {
              $('#searchNames tbody tr').css('display', 'table-row');
              $('#message').html('displaying all rows');
              return false;
           }

           var alpha = $(this).html();
           $('#searchNames tbody tr').hide().filter(function () {
              var td = $('td:first', $(this));
              return td.length && td.html() && new RegExp('^' + alpha + '.*$', 'i').test(td.html().toLowerCase());
           }).css('display', 'table-row');
           $('#message').html('displaying rows with "' + alpha + '"');
           return false;
        })
     });

AND 标记

  <div id="table_filter">
     <a id="show_all" href="#">Show All</a>
  </div>
  <p id="message"></p>
  <table class="table1" id="searchNames" style="width:500px;">
     <thead>
        <tr>
           <th>CONTACT NAME</th>
           <th>col 2</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>ssfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>asdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>apodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>opkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>lkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>nlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>essfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>easdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qapodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>oopkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>dlkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>snlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>vqwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>ssfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>asdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>apodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>opkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>lkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>nlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>essfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>easdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qapodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>oopkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>dlkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>snlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>vqwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>ssfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>asdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>apodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>opkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>lkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>nlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>essfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>easdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qapodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>oopkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>dlkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>snlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>vqwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>ssfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>asdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>apodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>opkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>lkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>nlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qwdsdfsd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>essfjkn jkdsnf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>easdl kln</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>qapodf</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>oopkpokj</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>dlkohasd</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>snlkcn</td>
           <td>Col2</td>
        </tr>
        <tr>
           <td>vqwdsdfsd</td>
           <td>Col2</td>
        </tr>
     </tbody>
  </table>

还有 jsfiddle

http://jsfiddle.net/Khq9k/2/

更新

要使其基于第 4 个<td> 进行过滤，请替换

var td = $('td:first', $(this));

与

var td = $('td:nth-child(4)', $(this));

【讨论】：

太棒了 - 您如何指定它以查找第四个 TD 的联系人姓名？？
再次感谢您！工作一种享受！ :-) 不要假设您知道突出显示 td 列是否可以让用户指示找到了哪一列？
您的意思是在过滤发生后始终突出显示第 4 列？
是否也可以在 ABC 列表中所有有结果的项目上添加背景颜色？
您的意思是在过滤发生后总是突出显示第 4 列？是的 - 那么当您取消过滤时，高光会消失？

【解决方案2】：

以上帖子不适用于我从数据库中获取的动态值。我试着写一些不太复杂的东西，效果也很好。

$( document ).ready(function() {
var alphas = 'abcdefghijklmnopqrstuvwxyz';
var tmp = '';
        for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;';
        $('#table_filter').append(tmp);

        $('#table_filter a').click(function () {
           var alpha = $(this).html();
           if(alpha == 'Show All'){
                $('#searchNames tbody tr').css('display', 'table-row');
           }
           else {
                $('#searchNames tbody tr').each(function( index ) {
                    var cur = $(':nth-child(1)', this).text().trim();
                    if(cur.charAt(0) === alpha) {
                        $(this).css('display', 'table-row');
                    }
                    else {
                        $(this).hide();
                    }
                });

           }
        });
    });

【讨论】：