您的位置：首页 > 其它

查询功能实现

2013-04-29 17:47 127 查看
１、输入关键字直接显示查询结果

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 隔行变色
$('#check_table tr:odd').addClass('odd');
$('#check_table tr:even').addClass('even');

// 筛选
$("#filter").click(
function(){
$("#check_table .datarow").hide().filter(":contains('ABCDEFG')").show();
}
);

// 按输入筛选
$("#keyword").keyup(function(){
var txt_val = $(this).val();
if (txt_val == "")
$("#check_table .datarow").show();
else
$("#check_table .datarow").hide().filter(":contains('" + ($(this).val()) + "')").show();
});
});
</script>

<style type="text/css">
* {
margin:0;padding:0;
}

body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

h2 {
margin-top: 20px;
}

.wrap {
margin: 20px;
}

table td, table th {
border: 1px solid #333;
padding: 5px 10px;
}

table th {
background-color: #333;
text-align: left;
color: #FFF;
}

.tb1 {
border-collapse: collapse;
}

.tb1 .odd {
background-color: #79BCFF;
}

.tb1 .even {
background-color: #D0E8FF;
}

</style>
</head>

<body>
<div class="wrap">
<a id="filter" href="javascript:;" onclick="return false">查询关键字为 'ABCDEFG'</a>
<div>输入关键字:<input type="text" id="keyword" /></div>
<table id="check_table" class="tb1" style="width: 100%">
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr class="datarow">
<td>1</td>
<td>Fuck</td>
<td>ABCDEFG</td>
<td>2012-1-1</td>
</tr>
<tr class="datarow">
<td>2</td>
<td>Shit</td>
<td>HIJKLMN</td>
<td>2012-2-6</td>
</tr>
<tr class="datarow">
<td>3</td>
<td>Dick</td>
<td>OPQRSTU</td>
<td>2012-2-10</td>
</tr>
<tr class="datarow">
<td>4</td>
<td>Ass</td>
<td>VWXYZAB</td>
<td>2012-2-15</td>
</tr>
<tr class="datarow">
<td>5</td>
<td>Hole</td>
<td>ABCDEFG</td>
<td>2012-2-16</td>
</tr>
</table>
</div>
</body>

</html>


2、输入关键字直接点击“查询”显示结果

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function check() {
var txt_val = $("#keyword")[0].value;
if (txt_val == "")
$("#check_table .datarow").show();
else
$("#check_table .datarow").hide().filter(":contains('" + txt_val + "')").show();
}
</script>

<style type="text/css">
* {
margin:0;padding:0;
}

body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

.wrap {
margin: 20px;
}

table td, table th {
border: 1px solid #333;
padding: 5px 10px;
}

table th {
background-color: #333;
text-align: left;
color: #FFF;
}

.tb1 {
border-collapse: collapse;
}

</style>
</head>

<body>
<div class="wrap">
<a id="filter" href="javascript:;" onclick="return false">查询关键字为 'ABCDEFG'</a>
<div>关键字：<input type="text" id="keyword"/>
<input type="button" id="keyword1" value="查询" style="color:blue;" onclick="check()"/>
</div>
<table id="check_table" class="tb1" style="width: 100%">
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr class="datarow">
<td>1</td>
<td>Fuck</td>
<td>ABCDEFG</td>
<td>2012-1-1</td>
</tr>
<tr class="datarow">
<td>2</td>
<td>Shit</td>
<td>HIJKLMN</td>
<td>2012-2-6</td>
</tr>
<tr class="datarow">
<td>3</td>
<td>Dick</td>
<td>OPQRSTU</td>
<td>2012-2-10</td>
</tr>
<tr class="datarow">
<td>4</td>
<td>Ass</td>
<td>VWXYZAB</td>
<td>2012-2-15</td>
</tr>
<tr class="datarow">
<td>5</td>
<td>Hole</td>
<td>ABCDEFG</td>
<td>2012-2-16</td>
</tr>
</table>
</div>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航