如何使用本机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。然后，当您离开输入元素（或在按钮的onclick（）处理程序中）时，您将执行以下操作：

• 抓住桌子元素。
• 依次查找每个孩子，这将是一行，保留对元素的引用
• 找到该行的第二个子节点并根据输入值对其进行测试，以查看它是否匹配（完全匹配，包含或您要应用的任何类型的测试）。
• 如果匹配，请设置一个指示匹配到该行的样式。如果没有，请在行上设置一个表示“不匹配”的样式。

您还需要一个样式表，使匹配的项目可见且不匹配的项目不可见（或使用深色和浅色文本，或任何您想要用于匹配和无法匹配的视觉指示器）。

如果不依赖于每行上的第二个单元格来保存国家/地区名称，而是在包含国家/地区名称的单元格上使用类别指示符，则可以使其更加健壮。然后，代替“查找第二个孩子”，您将“找到班级country的孩子。这样做意味着当您添加，删除或重新排列列时，您的应用程序不会中断。”