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

Question

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

我想要的是tr 搜索，而不是th 或td 搜索。

如果您查看此 W3schools 链接 https://www.w3schools.com/howto/howto_js_filter_table.asp，它是“td”搜索。

我的代码是

1. 类别 => 点击菜单

$('.category_item').click(function() {

    $(this).addClass('on').siblings().removeClass('on');

    var category = $(this).attr('id');

    if(category == 'all') {
        $('tr').hide().show();
    } else {
        $('tr').hide();
        $('.' + category).show();
    }

}); // click

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>

Answer 1

如果您查看 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

如果你想试试这个，我已经创建了codepen