jquery table篩選數據

本文轉載自查看原文 2019-05-30 11:12 417

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script src="scripts/jquery.min.js"></script>
    </head>
    <style>
        table,tr,td{
            border:solid 1px;
            border-collapse:collapse;
            text-align:center;
        }
    </style>
    
    <body>
                篩選：<input id="filter" type="text">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性別</td>
                    <td>暫住地</td>
                </tr>
            </thead>
            <tbody>
                <tr class="parent" id="row_01"><td colspan="3">前台設計組</td></tr>
                <tr class="child_row_01"><td>張三</td><td>男</td><td>浙江寧波</td></tr>
                <tr class="child_row_01"><td>三</td><td>男</td><td>浙江寧波</td></tr>
                
                <tr class="parent" id="row_02"><td colspan="3">后端開發組</td></tr>
                <tr class="child_row_02"><td>張三</td><td>男</td><td>寧波</td></tr>
                <tr class="child_row_02"><td>三</td><td>男</td><td>浙江寧波</td></tr>
                
                <tr class="parent" id="row_03"><td colspan="3">美工組</td></tr>
                <tr class="child_row_03"><td>張</td><td>男</td><td>浙江</td></tr>
                <tr class="child_row_03"><td>三</td><td>男</td><td>浙江寧波</td></tr>
            </tbody>
        </table>
    </body>
    <script type="text/javascript">
        $(function(){
            $('#filter').keyup(function(){
                $('table tbody tr').hide()
                    .filter(":contains('"+($(this).val())+"')").show();
            });
        });
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery之篩選 element ui table+分頁篩選全部數據 Element-UI Table 實現篩選數據功能 10.9 UiPath數據篩選Filter Data Table的介紹和使用 layui table數據渲染頁面+篩選醫生+在篩選日期一條龍 jQuery篩選器 jquery插件-table轉Json數據插件 jQuery三——篩選方法、事件 jQuery根據style篩選元素 jQuery操作table數據上移、下移和置頂