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

用JS实现页面关键字搜索查询框

最新推荐文章于 2024-04-18 18:54:44 发布

Jeesoul

最新推荐文章于 2024-04-18 18:54:44 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40644583/article/details/82251405

博客介绍了利用JS实现页面关键字搜索查询框的方法。提到在HTML页面中要注意<input>和<table>的id，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>

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