如何在 JavaScript 中搜索類別？

Question

我在做作業時遇到了一些問題。 我想用 JavaScript 實現對特定類別或所有類別的搜索。 我搜索了 web，但發現了關於這個主題的大量代碼。

我想要的是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

2. 搜索 => 我試過了。 此代碼在“所有數據”中實現，而不是在“可見數據”中實現，並且在實現類別被取消之后

$('.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