The following is a simple filter function implementation, using jquery to filter the table content.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格筛选</title>
<style>
table {
width: 50%;
border: 1px solid;
}
tr th {
border-bottom: 1px solid;
}
tr td{
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>出生地</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>上海</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>天津</td>
</tr>
<tr>
<td>4</td>
<td>赵柳</td>
<td>厦门</td>
</tr>
<tr>
<td>5</td>
<td>王莉莉</td>
<td>广州</td>
</tr>
<tr>
<td>6</td>
<td>柳旺</td>
<td>天津</td>
</tr>
<tr>
<td>7</td>
<td>张wu</td>
<td>北京</td>
</tr>
<tr>
<td>8</td>
<td>莉儿</td>
<td>上海</td>
</tr>
<tr>
<td>9</td>
<td>王欣欣</td>
<td>天津</td>
</tr>
<tr>
<td>10</td>
<td>李敏</td>
<td>厦门</td>
</tr>
<tr>
<td>11</td>
<td>许莉莉</td>
<td>广州</td>
</tr>
<tr>
<td>12</td>
<td>贾晶</td>
<td>天津</td>
</tr>
</tbody>
</table>
筛选条件:<input type="text" id="filterCon">
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#filterCon").keyup(function(){
$("table tbody tr").hide().filter(":contains('" + ($(this).val()) + "')").show();
}).keyup(); //DOM加载完时，绑定事件完成之后立即触发
</script>
</html>Effect:
1. Interface display:
2. Filter by serial number:
3. Filter by name:
4. Filter by place of birth:
