表格忽略大小写模糊查找多关键字筛选

最新推荐文章于 2022-11-10 11:51:31 发布

原创最新推荐文章于 2022-11-10 11:51:31 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍如何在表格数据中实现模糊查找并进行多关键字筛选，同时忽略大小写，提升搜索效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		div{
			width:900px;
			height:350px;
			margin-top: 100px;
			margin-left:200px;
		}
		table,td{
			border:1px solid black;
		}
		td{
			width:200px;
			height:30px;
		}
		table{
			border-collapse: collapse;
		}
		input{
			width:200px;
			height: 50px;
		}
	</style>
		
</head>
<body>
	
	<div>
		姓名：<input type="text" id="name">
		年龄：<input type="text" id="age">
		<input type="button" value="查找" id="bn1">
		<table id='sheet' >
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>21</td>
					<td></td>

				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>王尔</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>dddd</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>Blue</td>
					<td>34</td>
					<td></td>
				</tr>
			</tbody>
		</table>

	</div>
	
	<script>
		window.onload=function(){
			//获取input中的值添加表格的行
  			var name=document.getElementById('name');
			var age=document.getElementById('age');
  			var bn1=document.getElementById('bn1');
  			var tab=document.getElementById("sheet");
  			var rows=tab.tBodies[0].rows;
  			var length=rows.length;
     //       //基础版本字符串比较
  			// bn1.onclick=function(){
  			// 	for(var i=0;i<length;i++){
  			// 		if(rows[i].cells[1].innerHTML==name.value){
  			// 			rows[i].style.background="yellow";
  			// 		}else{
  			// 			rows[i].style.background="";

  			// 		}
  			// 	}
  			// }


  			//忽略大小写toLowerCase()

  			// bn1.onclick=function(){
  			// 	for(var i=0;i<length;i++){
  			// 		if(rows[i].cells[1].innerHTML.toLowerCase()==name.value.toLowerCase()){
  			// 			rows[i].style.background="yellow";
  			// 		}else{
  			// 			rows[i].style.background="";

  			// 		}
  			// 	}
  			// }


  			//模糊搜索  大文本.serarch("搜索文本")，如果找到则返回位置，否则返回-1；
  			// bn1.onclick=function(){
  			// 	for(var i=0;i<length;i++){
  			// 		if(rows[i].cells[1].innerHTML.search(name.value)!=-1){
  			// 			rows[i].style.background="yellow";
  			// 		}else{
  			// 			rows[i].style.background="";

  			// 		}
  			// 	}
  			// }

     
  			//多关键词
  			// bn1.onclick=function(){
  			// 	var txt=name.value.toLowerCase();
  			//     var arr=txt.split(' ');
  			
  			// 	for(var i=0;i<length;i++){
  			// 		rows[i].style.background="";

  			// 		for(var j=0;j<arr.length;j++){

  			// 			if(rows[i].cells[1].innerHTML.toLowerCase().search(arr[j])!=-1){
  			// 				rows[i].style.background="yellow";
  			// 			}
  			// 		}
  			// 	}
  			// }

  			//筛选
  			bn1.onclick=function(){
  				var txt=name.value.toLowerCase();
  			    var arr=txt.split(' ');
  			
  				for(var i=0;i<length;i++){
  					rows[i].style.display="none";

  					for(var j=0;j<arr.length;j++){

  						if(rows[i].cells[1].innerHTML.toLowerCase().search(arr[j])!=-1){
  							rows[i].style.display="block";
  						}
  					}
  				}
  			}
		}
	    
	</script>
		
		
</body>
</html>