当前位置:编程学习 > JAVA >>

jQuery学习笔记6 模糊查询过滤器

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo11.aspx.cs" Inherits="jQuery.demo11" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>关键字模糊查询</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#keyWord").keyup(function () {
                $("table tbody tr").hide().filter(":contains('" + $(this).val() + "')").show().keyup();
            });
        });
    </script>
    <style type="text/css">
        body, tr, td
        {
            font-size: 12px;
            text-align: center;
            color: Red;
            width: 500px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    筛选:<input type="text" id="keyWord" />
    <table border="1" width="80%">
        <thead>
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    性别
                </td>
                <td>
                    adele
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Adele
                </td>
                <td>
                    Female
                </td>
                <td>
                    adele@mail.b2b.cn
                </td>
            </tr>
            <tr>
                <td>
                    Avril Lavigne
                </td>
                <td>
                    Female
                </td>
                <td>
                    AvrilLavigne@mail.b2b.cn
                </td>
            </tr>
            <tr>
                <td>
                    The Beatles
                </td>
                <td>
                    Male
                </td>
                <td>
                    TheBeatles@mail.b2b.cn
                </td>
            </tr>
            <tr>
                <td>
                    Lenon
                </td>
                <td>
                    Female
              &nbs

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,