我有一个工作演示，但仅适用于 ListView ，我需要能够单击顶部的 A、B、C 等列表，然后按表中的联系人姓名进行过滤。
因此，只要您点击 A，它就会显示表格中所有以“A”开头的姓名。
正如我提到的，它适用于 ListView ，但不确定如何让它在表格中工作？
希望有人能帮忙。它基于来自 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
});
谢谢
最佳答案
我相信那里有许多“表格排序器”插件，但这个简短的代码可以实现您正在寻找的东西
脚本
var alphas = 'abcdefghijklmnopqrstuvwxyz';
$(document).ready(function () {
var tmp = '';
for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a> ';
$('#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;
})
});
和标记
<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
更新
让它根据第 4 个 <td> 进行过滤, 替换
var td = $('td:first', $(this));
与
var td = $('td:nth-child(4)', $(this));
关于jQuery Alpabetical 在表格、A、B、C 等列表中按名称过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15829910/