js表格应用---高亮显示搜索

最新推荐文章于 2024-04-22 13:44:23 发布

风潮弟弟

最新推荐文章于 2024-04-22 13:44:23 发布

阅读量621

点赞数 2

分类专栏： js代码文章标签： js表格应用

本文链接：https://blog.csdn.net/dfc_xiaoke/article/details/82779529

版权

js代码专栏收录该内容

8 篇文章 0 订阅

订阅专栏

     这个代码实现js表格中搜索某项内容，并用高亮颜色显示，类似与百度搜索输入关键字就可以在表格中进行搜索

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格搜索</title>
	</head>
	<script>
		//实现功能,搜索显示,大小写搜索不会影响,模糊搜索 
			window.onload=function () {
				var otab = document.getElementById('tab2');
				var obtn = document.getElementById('btn1');
				var otext = document.getElementById('name');
				obtn.onclick=function () {
					for (var i = 0; i < otab.tBodies[0].rows.length ; i++) {
				    var stab = otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
				    var stext = otext.value.toLowerCase();
				   // toLowerCase()将英文全部转换成小写,为了用户在输入小写的时候仍然可以将内容搜索出来
				    var arr = stext.split(' ');
				    //split的作用将某一段字符串按照指定字符进行切割
				    otab.tBodies[0].rows[i].style.background = "";//确保在下一次搜索时上一次搜索不会影响这次搜索的结果
				    for (var j = 0; j < arr.length; j++) {
				    	if (stab.search(arr[j]) != -1) {
						otab.tBodies[0].rows[i].style.background = 'yellow';
					}
				    }
				}
				}
				
			}	
	</script>    
	<body>
		姓名：<input id="name" type="text" />
		<input id="btn1" type="button" value="搜索" />
		<table id="tab2" width="500" border="1">
			<thead>
				<td>序号</td>
				<td>姓名</td>
				<td>学号</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>丁冯超</td>
					<td>131412</td>
					<td>21</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>钟辉</td>
					<td>131212</td>
					<td>20</td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>申振</td>
					<td>131415</td>
					<td>23</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>丁元超</td>
					<td>131315</td>
					<td>21</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>于加良</td>
					<td>111415</td>
					<td>20</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

运行前