在文本框输入HP 1007可以搜索到第一条数据,其它的数据隐藏,用正则表达式都只能判断数字或者HP。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
jQuery.expr[':'].contains = function (a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
}//忽略大小写
$(function(){
$("#btn").click(function(){
var sea = $('#text').val();//获取文本框输入内容
var se = sea.replace(/[^\w]/ig,"");//提取所有
/*var se = sea.replace(/^[a-z\d]/ig,"");*/
$("table tbody tr").css("background-color","red");
$("table tbody tr").filter("table tbody tr:contains("+se+")").css("background-color","yellow");
/*alert(se);*/
/*if(se!=0){
$('table tbody tr').filter(':contains('s')').show();//在table tbody tr中筛选包含文本内容显示
}else{
$('table tbody tr').hide();
};*/
});
});
/*$(document).ready(function(){
$("table tbody tr td").filter("table tbody tr td:contains(HP)").css("background-color","yellow");
});*/
</script>
</head>
<body>
<div class="input">
<!--输入框--> <!--按钮-->
<input type="text" id="text" /><input type="button" value="搜索"/ id="btn" >
</div>
<table>
<thead><h3>欢迎来到我的主页</h3></thead>
<tbody class="tb">
<tr class="tr">
<td class="td">HP LaserJet P1007</td>
<td>39</td>
</tr>
<tr>
<td class="td">HP LaserJet P1009</td>
<td>HP LaserJet P1007</td>
</tr>
<tr>
<td class="td">HP LaserJet M1130</td>
<td>86</td>
</tr>
<tr>
<td class="td">Jet M1130</td>
<td>86</td>
</tr>
<tbody>
</table>
<p>你最喜欢的网站:</p>
<ul id="choose">
<li>Google</li>
<li>Taobao</li>
<li>Runoob</li>
</ul>
</body>
</html>