问题描述
基于 css-tricks 给出的示例，我有在我的xsl中添加了一个带有jQuery的搜索表.当然可以.但是当我在表中搜索时，th被隐藏了.据我了解，这是因为input中使用的id对于所有tr都是相同的.我是jQuery的新手，因此非常感谢您提供一些帮助，以便在显示搜索结果时显示th标题.
Based on the example given by css-tricks, I have added a search table with jQuery in my xsl. It works of course; but when I search in the table, th are hidden. From what I understand, it's because the id used in input is the same for all tr. I'm a neophyte in jQuery, thus I would very much appreciate some help in order to display th titles when the results of the search are displayed.
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代码[请注意，我还有一个过滤器功能 sortable ]
xsl code [note that I have also a filter function sortable]
<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>
预先，非常感谢您的帮助.
In advance, thank you very much for your help.
推荐答案
更改allRows，使其仅包含具有<td>元素的行:
Change allRows so it only contains rows that have <td> elements:
var allRows = $("tr:has(td)");
这篇关于使用jQuery搜索表时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！