Jquery 组 tbale表格筛选
2024-10-15 14:16:26
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style> table{
border:1px solid #000;
width: 400px;
text-align: center;
border-collapse: collapse;
}
thead tr{
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="3">筛选：<input id="filterName" type="text"/></th>
</tr>
</thead>
<tbody>
<tr class="child_row_01"><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>王山2</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>李山3</td><td>男</td><td>浙江余杭</td></tr>
<tr class="child_row_02"><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td>李山5</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
</tbody>
</table>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#filterName").keyup(function(){
$("table tbody tr").hide()
.filter(`:contains('${$(this).val()}')`).show();
});
}); </script>
</html>
最新文章
- 20145220&20145209&20145309信息安全系统设计基础实验报告（3）
- selenium3各种报错解决办法
- 2015Summer Training #2
- Uncaught TypeError: _react2.default.findDOMNode is not a function
- 【shell】case语句
- LA 3713
- window2008 64位系统没有office组件问题分析及解决
- JS-异常处理
- App Store不能下载一直等待中的两种解决办法
- 获取或设置当前窗口contextmenu事件的事件处理函数
- tornado SSL 证书获取与服务器配置
- 打开xmind 8 输入序列号
- 给OkHttp Client添加socks代理
- Action<T> Delegate
- 将项目发布到Maven中央仓库的不完整纪要
- 4557: [JLoi2016]侦察守卫
- 006PHP文件处理—— 目录操作 删除目录 删除置顶类型文件
- mysql/mariadb学习记录——连接查询（JOIN）
- Python坑系列：可变对象与不可变对象
- KMP + 求最小循环节 --- POJ 2406 Power Strings