您的位置：首页 > Web前端 > JQuery

jquery 页面搜索例子

2015-04-13 16:03 190 查看

<!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>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table">
<tr class="thead">
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>手机号码</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>前端开发</td>
<td>13432349833</td>
</tr>
<tr>
<td>张歆艺</td>
<td>女</td>
<td>PHP</td>
<td>15943433443</td>
</tr>
<tr>
<td>赵毅</td>
<td>男</td>
<td>PHP</td>
<td>13423783334</td>
</tr>
<tr>
<td>赵克琴</td>
<td>女</td>
<td>前端开发</td>
<td>13743983849</td>
</tr>
</table>
<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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航