用JS在页面添加关键字查询框

利用js做一个页面关键字搜索查询框

###HTML页面

注意一下HTML页面里<input>的id以及<table>的id JS代码可以直接复制使用

        ........已省略.....
        <label>关键字：</label>
	<input type="text" name="" id="input" value="" placeholder="请输入查询关键字"/>
	<table id="contentTable">
		<thead>
			<tr>
			    <th></th>
			</tr>
		</tehead>
			<tr>
			    <td></td>
			</tr>
			<tr>
			    <td></td>
			</tr>
			<tr>
			    <td></td>
			</tr>
			<tr>
			    <td></td>
			</tr>
	</table>
        ........已省略.....

###代码实现

<script type="text/javascript">
		$(document).ready(function(){
			var text = "";
			//实时筛选，不用点击按钮
			setInterval(function(){
				text = $('#input').val();//获取文本框输入
				if($.trim(text) != ""){
					$("#contentTable tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
				}else{
					$('#contentTable tr').show();//当删除文本框的内容时，又重新显示表格所有内容
				}
			},100);
		})
	</script>

上述代码，可以搜索到当前页面中所有的关键字。