jQuery实现对Table内容的模糊查询
jQuery实现对表格内容的模糊查询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="css/style.css" mce_href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="D:/Demo/jquery-1.8.0.js"></script>
<script type="text/javascript">
$().ready(function(){
$("#txtName").keyup(
function(){
$("table tr:gt(0)").hide();
var $d = $("table tr:gt(0)").filter(":contains('"+$.trim($("#txtName").val())+"')");
$d.show();
}
)
})
</script>
</head>
<body>
<p><strong>实现动态列表内容查询</strong></p>
<div>
<input type="text" id="txtName" />
</div>
<br />
<table width="438" height="auto" border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>类别</td>
<td>著作</td>
</tr>
<tr>
<td>1001</td>
<td>天龙八部</td>
<td>武侠</td>
<td>金庸</td>
</tr>
<tr>
<td>1002</td>
<td>小李飞刀</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1003</td>
<td>逆水寒</td>
<td>言情</td>
<td>温瑞安</td>
</tr>
<tr>
<td>1004</td>
<td>天涯明月刀</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1005</td>
<td>朝天一棍</td>
<td>武侠</td>
<td>温瑞安</td>
</tr>
<tr>
<td>1006</td>
<td>侠骨丹心</td>
<td>武侠</td>
<td>梁羽生</td>
</tr>
<tr>
<td>1007</td>
<td>神雕侠侣</td>
<td>武侠</td>
<td>金庸</td>
</tr>
<tr>
<td>1008</td>
<td>陆小凤传奇</td>
<td>武侠</td>
<td>古龙</td>
</tr>
<tr>
<td>1009</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
</body>
</html> 相关推荐
思君夜未眠 2020-09-04
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
SCNUHB 2020-11-10
FellowYourHeart 2020-10-05
jessieHJ 2020-08-19
末点 2020-08-03
nimeijian 2020-07-30
好记忆也需烂 2020-07-28
zlsdmx 2020-07-05
tomson 2020-07-05
tianqi 2020-07-05
onlykg 2020-07-04