如何使用本机jQuery按列过滤表

Question

我想使用核心的jQuery库来做每一个标题。使用原生jQuery UI库可以做到这一点吗？我不喜欢使用插件，因为这些插件没有托管在任何CDN上(据我所知)。

如何通过将键入的输入文本与第二个表列进行匹配来筛选表？

<input type="text" id="filter" />
<table>
<tr><td>1</td><td>UK</td></tr>
<tr><td>2</td><td>USA</td></tr>
<tr><td>3</td><td>France</td></tr>
</table>

Answer 1

$('tr td:nth-child(2)')将为您提供该表中的所有第二个TD。它以1为基础，并将在其计数中包括TR的任何非TD子级。

$('tr td:eq(1)')还将提供该表中的所有第二个TD。它是从0开始的，并且在其计数中将仅包括TR的TD子项。

一旦您希望对包含TD的行执行某些操作，则可以使用TD的父级。

Answer 2

简单地说，您将把id放在table元素上。然后，当您离开input元素时(或者，在按钮的onclick()处理程序中)，您将执行以下操作：

• 获取表元素。
• 依次查找每个子项，这将是一行，保留对元素的引用
• 查找该行的第二个子项，并根据输入值对其进行测试，以查看其是否匹配(精确匹配、包含或要应用的任何类型的测试)。
• 如果匹配，则设置指示其与该行匹配的样式。如果不匹配，则在行上设置一个指示“不匹配”的样式。

您还需要一个样式表，使匹配的项可见，而不匹配的项不可见(或使用深色和浅色文本，或您希望用于匹配和未匹配的任何视觉指示器)。

如果在保存国家名称的单元格上使用类指示符，而不是依赖每行上的第二个单元格来保存国家名称，则可以使此操作更加健壮。然后，不是“找到第二个子类”，而是“找到country类的子类”。这样做意味着当您添加、删除或重新排列列时，应用程序不会崩溃。