JSFiddle - React, Tailwind, and code Playground

by park kyungdoo

HTML

<div id="container">
        <div id="input-form">
            이름 : <input type="text" id="keyword" />
            개수: <span class="count"></span>            
        </div>

        <table id="user-table">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>이름</th>
                    <th>생년월일</th>
                    <th>학과</th>
                    <th>학번</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>박경두</td>
                    <td>1991.09.07</td>
                    <td>경영정보학과</td>
                    <td>2000290031</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>김동규</td>
                    <td>1991.07.07</td>
                    <td>경영학과</td>
                    <td>2000290032</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>하석진</td>
                    <td>1991.05.15</td>
                    <td>사회학과</td>
                    <td>2000290033</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>김창식</td>
                    <td>1991.08.07</td>
                    <td>건축학과</td>
                    <td>2000290038</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>송승헌</td>
                    <td>1989.04.07</td>
                    <td>물리학과</td>
                    <td>2000290039</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>김태희</td>
                    <td>1988.02.07</td>
                    <td>의류학과</td>
                    <td>2000290040</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>정지훈</td>
                    <td>1988.07.25</td>
                    <td>식품학과</td>
                   ...

CSS

#container {width: 960px; margin: 0 auto;}
        #container #input-form {text-align: center;}
        #user-table {margin: 0 auto; text-align: center;}
        #input-form {margin-top: 10px; margin-bottom: 10px;}

        #user-table {border-collapse: collapse;}
        #user-table > thead > tr { background-color: #333; color:#fff; }
        #user-table > thead > tr > th { padding: 8px; width: 150px; }
        #user-table > tbody > tr > td { border-bottom: 1px solid gray; padding:8px; }

JavaScript

$("#keyword").keyup(function() {
                var k = $(this).val();
                $("#user-table > tbody > tr").hide();
                var temp = $("#user-table > tbody > tr > td:nth-child(5n+2):contains('" + k + "')");

                $(temp).parent().show();
                $('.count').text(temp.length);                
            })