<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>contains</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<input type="text" id="search">
<button id="sub">搜索</button>
<table width="100%" border=1>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
<th>地区</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>[email protected]</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>[email protected]</td>
<td>北京</td>
</tr>
<tr>
<td>3</td>
<td>张五</td>
<td>女</td>
<td>[email protected]</td>
<td>上海</td>
</tr>
<tr>
<td>4</td>
<td>赵四</td>
<td>男</td>
<td>[email protected]</td>
<td>深圳</td>
</tr>
</table>
</body>
<!-- <script></script>放在body的后面，但是它会自动地放到body的里面 -->
<script src="./js/a1.js">
$("#sub").click(function() {
var val = $("#search").val(); // 获取搜索词
if (val.length > 0) {
$("tr:not(:first)").hide(); // 除了第一行外的所有行隐藏
$("tr:contains(" + val + ")").show(); // 包含搜索词的行显示
} else {
$("tr").show();
}
});
</script>
</html>
时间： 2024-08-07 21:19:39