当前位置：网站首页>Web page table table, realizing rapid filtering

Web page table table, realizing rapid filtering

2022-07-27 14:50:00 【Purple potato bun】

Who knows 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--jQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        table {
            border:0;
        }
        p {
            font:normal 12px/17px Arial;
        }
        td {
            font:normal 12px/17px Arial;
            padding:2px;
            width:100px;
        }
        th {
            font:bold 12px/17px Arial;
            text-align:left;
            padding:4px;
            border-bottom:1px solid #333;
            width:100px;
        }
        .even {
            background:#FFF38F;
        }
        /*  Even row style */
        .odd {
            background:#FFFFEE;
        }
        /*  Odd row style */
        .selected {
            background:#FF6500;
            color:#fff;
        }
    </style>
</head>
<body>
    <p> 
        <br>  Screening ： 
        <input id="filterName" name="filterName"> 
        <span class="search"> Search for </span> 
        <br> 
    </p>

    <table>
        <thead>
        <tr><th> full name </th><th> Gender </th><th> Temporary residence </th></tr>
        </thead>
        <tbody>
        <tr><td>SYJ</td><td> male </td><td> Qinhuangdao City, Hebei Province </td></tr>
        <tr><td> Li Si </td><td> Woman </td><td> Beijing, Beijing </td></tr>
        <tr><td> Wang Wu </td><td> male </td><td> Qinhuangdao City, Hebei Province </td></tr>
        <tr><td> Zhao Liu </td><td> male </td><td> Tangshan City, Hebei Province </td></tr>
        <tr><td> Zhang San </td><td> male </td><td> Hohhot, Inner Mongolia </td></tr>
        <tr><td> Nannan </td><td> Woman </td><td> Baotou City, Inner Mongolia </td></tr>
        <tr><td> Bei Bei </td><td> male </td><td> Beijing, Beijing </td></tr>
        <tr><td> West </td><td> Woman </td><td> Qinhuangdao City, Hebei Province </td></tr>
        <tr><td> Winter and winter </td><td> male </td><td> Northeast Liaoning Province </td></tr>
        </tbody>
    </table>
    
    <!-- Sorting function -->
    <script type="text/javascript">
        $(function() {
            $('.search').on('click', function() {
                // console.log($('#filterName').val());
                $('table tbody tr').hide()
                    .filter(":contains('" + ($('#filterName').val()) + "')")
                    .show();
            })
        })
    </script>
</body>
</html>

原网站

版权声明
本文为[Purple potato bun]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271333455810.html

边栏推荐

猜你喜欢

随机推荐