input 输入时筛选数据
程序员文章站
2024-03-21 11:26:52
...
input 输入时筛选数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery 搜索筛选匹配-jq22.com</title>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
tr {
padding: 0;
margin: 0;
border: 1px solid #000;
height: 40px;
line-height: 40px;
text-align: center;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="text" placeholder="搜索" id="search" onkeyup="search(this)">
<table id="trList">
<tbody>
<tr>
<th>漫威英雄</th>
</tr>
<tr>
<td>浩克_伽马射线</td>
</tr>
<tr>
<td>钢铁侠_漫威</td>
</tr>
<tr>
<td>小蜘蛛_漫威</td>
</tr>
<tr>
<td>娜塔莎_漫威</td>
</tr>
<tr>
<td>浩克_漫威</td>
</tr>
<tr>
<td>美国队长_漫威</td>
</tr>
<tr>
<td>奇异博士_漫威</td>
</tr>
<tr>
<td>索尔</td>
</tr>
<tr>
<td>星爵</td>
</tr>
<tr>
<td>鹰眼</td>
</tr>
</tbody>
</table>
<script>
function search(obj) {
if ($(obj).val() != "") {
$("td").css("background-color", "#ffffff");
$("td:contains(" + $(obj).val() + ")").css("background-color", "#FFCC99");
} else {
$("td").css("background-color", "#ffffff");
}
}
</script>
</body>
</html>
效果如下匹配成功改变背景颜色
上一篇： Android属性动画学习一
下一篇： Redis系列五：持久化