javascript 搜索功能

最新推荐文章于 2023-10-16 08:02:23 发布

青天诀

最新推荐文章于 2023-10-16 08:02:23 发布

阅读量1.9k

点赞数

分类专栏： Web前端文章标签： Web前端 javascript

本文链接：https://blog.csdn.net/u012193330/article/details/41318519

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			table{
				
				width: 500px;
			}
			td{
				border:1px solid #ccc;
				padding:5px;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var oTb=document.getElementById('tb');
				var oldColor=null;
				var tName=document.getElementById('name');
				var oBtn=document.getElementById('btn');
				oBtn.οnclick=function(){
					var aRows=oTb.tBodies[0].rows;
					for(var i=0;i<aRows.length;i++)
					{
						var tdValue=aRows[i].cells[1].innerHTML.toLowerCase();
						var tNameValue=tName.value.toLowerCase().split(' ');
						for(var j=0;j<tNameValue.length;j++)
						{
							if(tdValue.search(tNameValue[j])>=0)
							{
								aRows[i].style.background='green';
								break;
							}
							else{
								aRows[i].style.background='';
							}
						}
						
					}
				};
				
				
				
				
			};
		</script>
	</head>
	<body>
		姓名：<input id='name' type="text"/>
		<input id="btn" type="button" value="搜索" />
		<table id="tb">
			<thead>
				<tr>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Blue</td>
					<td>23</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>26</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>29</td>
				</tr>
				<tr>
					<td>4</td>
					<td>青天决</td>
					<td>28</td>
				</tr>
				<tr>
					<td>5</td>
					<td>赵少邦</td>
					<td>23</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

注意事项：

A.search(B)可以在A中搜索B的位置，返回B出现的位置
A.split(B)将A以B划分为几部分，并返回数组，相当于分词操作

运行结果如下：

青天诀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 搜索功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project table{ width: 500px; } td{ border:1px solid #ccc
复制链接

扫一扫