How to search with category in JavaScript?

Question

I had some problem while doing homework. I want to implement a search for specific category or all category with JavaScript. I searched the web, but found bulky code about this subject.

What I want is tr search, not th or td search.

If you look this W3schools link https://www.w3schools.com/howto/howto_js_filter_table.asp it is 'td' search.

My code is

1. category => click menu

$('.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. search => I tried. This code implements in 'all data', not 'visible data' and after implements category is canceled

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

If you look at how an html table is structured, you will see that a tr element does not hold any data by itself, only td and th elements do.

If you want to do a text search through your table, you should always compare your query string to the content of cells.

Good news, though, how you want to display your search results is actually a different matter and you can display the results by row, by retrieving the matching cells' parent rows.

        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

I have made a codepen if you want to try this out