jQuery：在Web页面实现筛选功能功能

最新推荐文章于 2024-06-18 15:53:11 发布

冰激凌啊

最新推荐文章于 2024-06-18 15:53:11 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/gyxx1998/article/details/105682511

版权

效果

在这里插入图片描述

完整代码

<!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;
        }
        /* 偶数行样式*/
        .odd {
   
            background:#FFFFEE;
        }
        /* 奇数行样式*/
        .selected {
   
            background:#FF6500;
            color:#fff;
        }
    </style>
</head>
<body>
    <p> 
        <br> 筛选： 
        <input id="filterName" name="filterName"> 
        <span class="search">搜索</span> 
        <br> 
    </p>

    <table>
        <thead>
        <tr>