使用 jQuery 搜索 table 时隐藏

Question

根据css-tricks给出的例子，我在我的xsl中添加了一个搜索table和jQuery。它当然有效；但是当我在 table 中搜索时， th 被隐藏了。据我了解，这是因为 input 中使用的 id 对所有 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代码[注意我还有过滤函数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>

提前，非常感谢您的帮助。

Answer 1

更改 allRows，使其仅包含具有 <td> 个元素的行：

var allRows = $("tr:has(td)");

使用 jQuery 搜索 table 时隐藏

th hide when search table with jQuery

html

jquery

search

html-table

xslt-1.0