如何在JavaScript中使用类别进行搜索？

我在做作业时遇到了一些问题。我想用JavaScript实现对特定类别或所有类别的搜索。我在网上搜索了一下，但找到了关于这个主题的大量代码

我想要的是

tr

搜索，而不是

th

或

td

搜索

如果你看这个链接，它是“td”搜索

我的代码是

类别=>单击菜单

搜索=>我试过了。此代码在“所有数据”中实现，而不是在“可见数据”中实现，并且在取消实现类别后实现

类别
전체
A.
B
C
D
추천
추천
추천
13
3.
2.

如果您查看html表的结构，您将看到

tr

元素本身并不保存任何数据，只有

td

和

th

元素保存数据

如果要在表中执行文本搜索，应始终将查询字符串与单元格内容进行比较

不过，好消息是，如何显示搜索结果实际上是另一回事，您可以通过检索匹配单元格的父行，按行显示结果

        var query = $(this).val().toLowerCase();
        if(key.keyCode === 13) {
            // Restore all rows if query is empty
            if (query === '') {
              $("tbody tr").show();
              return;
            }
            // Search form matching cells
            var matchingCells = $("tbody tr td")
                .filter(function() {
                     return $(this).text().toLowerCase().indexOf(query) > -1
                });
            // Start by hiding all rows
            $("tbody tr").hide();
            // Retrieve the matching cells' parent rows and show them
            matchingCells.each(function() { $(this).parents('tr').show(); })
        } // if

    }); // search

---

如果你想尝试一下，我已经做了一个简单的回答

你能澄清你所说的td搜索是什么意思吗？嗯。。我不使用'td'，但链接代码使用'td'。对不起，我不好，我问tr搜索。您想完成什么？如果您查看第一个代码，我将使用代码“$（'tr'）.hide（）.show（）；”我认为表搜索和这个方法是一样的，所以我在表搜索中使用了这个方法。如果我用“td”，什么都不会出来。谢谢你的帮助。你知道分类搜索的方法吗？我之所以要使用“tr”，是因为我在“tr”分类名称中为分类编写了类。如果我理解正确，你所说的分类只是一个css类。在这种情况下，只有您的筛选函数将更改：

var matchingRows=$（“tbody tr”）.filter（函数（）{返回this.className.toLowerCase（）.indexOf（查询）>-1}）

但如果类别是相关数据，则可能应该将其存储在单元格中，而不是存储在类名中。用户如何知道他在搜索什么？用户单击类别。

$('.inputSearch').keydown(function(key) {
        var value = $(this).val().toLowerCase();

        if(key.keyCode == 13) {
            $("tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        } // if

    }); // search

    <main class="listWrap">
        <div class="listTitle">
            <h3>Category</h3>
            <div class="category">
                <button class="category_item on" id="all">전체</button>
                <button class="category_item" id="a">a</button>
                <button class="category_item" id="b">b</button>
                <button class="category_item" id="c">c</button>
                <button class="category_item" id="d">d</button>
            </div>
        <div class="searchArea">
            <input class="inputSearch" type="text" id="myInput" onkeyup="search()" placeholder="제목, 작성자이름으로 검색">
        </div>
    </div>

        <div class="listTableWrap">
            <table class="listTable" id="myTable">
            <tbody>
            <tr class="a recomm">
            <td class="num"><span class="rec">추천</span></td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
        <tr class="b recomm">
            <td class="num"><span class="rec">추천</span></td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
        <tr class="recomm c">
            <td class="num"><span class="rec">추천</span></td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
        <tr class="b">
            <td class="num">13</td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
        <tr class="d">
            <td class="num">3</td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
        <tr class="c">
            <td class="num">2</td>
            <td></td>
            <td class="project"><a href="/step1/content.jsp"></a></td>
            <td class=""></td>
            <td class="name"></td>
        </tr>
            </tbody>
            </table>
        </div>

    </main>

        var query = $(this).val().toLowerCase();
        if(key.keyCode === 13) {
            // Restore all rows if query is empty
            if (query === '') {
              $("tbody tr").show();
              return;
            }
            // Search form matching cells
            var matchingCells = $("tbody tr td")
                .filter(function() {
                     return $(this).text().toLowerCase().indexOf(query) > -1
                });
            // Start by hiding all rows
            $("tbody tr").hide();
            // Retrieve the matching cells' parent rows and show them
            matchingCells.each(function() { $(this).parents('tr').show(); })
        } // if

    }); // search