Как искать с категорией в JavaScript?

Question

У меня были некоторые проблемы при выполнении домашней работы. Я хочу реализовать поиск по определенной категории или всей категории с помощью JavaScript. Я искал в Интернете, но нашел громоздкий код по этому предмету.

Я хочу tr поиск, а не th или td поиск.

Если вы посмотрите эту ссылку W3schoolshttps://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

search => Я пытался. Этот код реализуется во «всех данных», а не в «видимых данных», и после того, как категория агрегатов отменяется

$('.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 , если вы хотите попробовать это