jQUERY页面搜索实例

180it 2019-09-27 PM 1356℃ 0条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>页面搜索实例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>

table{border-collapse:collapse;}
table td,table th{ border:1px solid #ddd; line-height: 30px; padding: 0 0 0 10px;}

</style>
</head>
<body>

姓名 性别 职位 手机号码
张三 前端开发 1343234**
张歆艺 PHP 1594343**
赵毅 PHP 1342378**
赵克琴 前端开发 1374398**

<input type="text" name="" id="">
<input type="button" value="搜索">
<script src="http://code.jquery.com/jquery-1.9.1.js";></script>
<script>

$(function(){
    $('input[type=button]').click(function(){
        var $td = $("#table tr:not('.thead')");
        var text = $('input[type=text]').val();
        if($.trim(text) !==""){
            $td.hide().filter(':contains("'+ text + '")').show();
        }
    });
});

</script>
<script src="http://www.woaixiao.com/js_2014/jquery.js";></script>
</body>
</html>

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章或资源对您有帮助,欢迎打赏作者。一路走来,感谢有您!

标签: none

jQUERY页面搜索实例