html - 使用 jQuery 搜索表格时隐藏
问题描述
基于css-tricks给出的示例,我在我的xsl
. 它当然有效;但是当我在表中搜索时,th
都被隐藏了。据我了解,这是因为id
使用的 ininput
对 all 都是一样的tr
。我是 jQuery 的新手,因此我非常感谢一些帮助,以便在显示th
搜索结果时显示标题。
jQuery脚本:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
<script>
<![CDATA[
var allRows = $("tr");
$("input#search").on("keydown keyup", function() {
allRows.hide();
$("tr:contains('" + $(this).val() + "')").show();
});
]]>
</script>
xsl
代码 [请注意,我还有一个可排序的过滤功能]
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"/>
<table class="sortable table-5" >
<caption>List of “What Result”
<input class="input-table-5" type="search" id="search" placeholder="Search.." aria-label="Search"/>
</caption>
<tr>
<th>Occur.</th>
<th>What Result</th>
<th>What Context</th>
<th>What Sphere</th>
<th>vs AE</th>
<th>vs clan</th>
</tr>
<xsl:for-each select="./key('persName', @ana)//ancestor-or-self::interp">
<tr>
<td><xsl:value-of select="./replace(replace(replace(tokenize(@ana)!substring-after(., '#'), '_', ':'), 'l', ''), 'ktu', 'KTU ')"/></td>
<td><xsl:value-of select=".//ref[@n='2']/stage/key('whatResult-interp', @ana)/catDesc"/></td>
<td><xsl:value-of select=".//ref[@n='5']/placeName/key('whatContext-interp', @ana)/catDesc"/></td>
<td><xsl:value-of select=".//ref[@n='6']/span/key('whatSphere-interp', @ana)/catDesc"/></td>
<td><xsl:value-of select=".//ref[@n='3-2a']/persName/key('person', tokenize(@ana, '\s+')[1])/persName/node()[@n = '1b']"/></td>
<td>
<!-- other data -->
</td>
</tr>
</xsl:for-each>
</table>
在此先感谢您的帮助。
解决方案
更改allRows
使其仅包含具有<td>
元素的行:
var allRows = $("tr:has(td)");
推荐阅读
- cordova - 如何解决 Cordova 签名问题?
- python - 在 Python 中编写更快的回溯算法
- c# - 如何确定执行环境平台
- php - Laravel 5 - 从集合中获取值并传递给视图
- bash - 带有 for 循环和 ssh 的 Bash 文件
- python - Django Postgres ArrayField 迁移
- c - 剔除适用于从视图投影矩阵中提取平面,但不适用于投影矩阵
- c# - 我可以在 C# 中为子类(反射/发射吗?)在运行时创建(添加)方法覆盖
- python - 具有相同数字的下一个更大的数字 - Codewars Kata - 我该如何改进它
- javascript - 数据表未填充 json 数据