javascript制作查找表格内容并高亮显示效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			width: 500px;
			border-collapse: collapse;
			border: 1px solid gray;
		}
		th,td{
			line-height: 30px;
			border: 1px solid gray;
			text-align: center;
		}
	</style>
</head>
<body>
	<label for="">编号:</label><input type="text" id="txt-id">
	<label for="">姓名:</label><input type="text" id="txt-name">
	<button id="btn">查找</button>
	<table>
		<caption>学生信息表</caption>
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1000</td>
				<td>Jack</td>
				<td>20</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>Tom</td>
				<td>24</td>
				<td>男</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>Roes</td>
				<td>18</td>
				<td>女</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>Lucy</td>
				<td>6</td>
				<td>女</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>Roes</td>
				<td>34</td>
				<td>女</td>
			</tr>
		</tbody>
	</table>

	<script type="text/javascript">
		//找到输入框
		var txtId=document.querySelector('#txt-id');
		var txtName=document.querySelector('#txt-name');
		//找到表格内容中所有tr
		var trs=document.querySelector('tbody').querySelectorAll('tr');

		//为查找按钮添加点击事件
		//document.getElementById('btn');
		document.querySelector('#btn').onclick=function(){
			// getInfoById(txtId.value);
			// getInfoByName(txtName.value);
			// getInfoto(txtId.value,txtName.value);
			var id=txtId.value,name=txtName.value;
			if (id!=''&&name=='') {
				getInfoById(id);
			}else if (id==''&&name!='') {
				 getInfoByName(name);
			}else{
				getInfoto(id,name);
			}

		};

		//清除表格底色
		function clearBg(){
			for(var i=0;i<trs.length;i++){
				trs[i].style.backgroundColor='white';
			}
		}

		//根据ID检索编号
		function getInfoById(no){
			clearBg();
			//遍历所有行的内容
			for(var i=0;i<trs.length;i++){
				var id=trs[i].children[0].innerHTML;//表格中的编号
				//输入的编号与表格编号作比较
				if (id==no) {
					trs[i].style.backgroundColor='yellow';
					break;//ID是唯一的，不需要再向下查找
				}
			}
		}

		//根据姓名检索表格
		function getInfoByName(name){
			clearBg();
			//遍历所有行的内容
			for(var i=0;i<trs.length;i++){
				var userName=trs[i].children[1].innerHTML;//表格中的姓名
				//输入的姓名和表格中的姓名作比较
				if (name==userName) {
					trs[i].style.backgroundColor='yellow';
				}
			}
		}

		//根据ID和姓名查找
		function getInfoto(no,name){
			clearBg();
			//遍历所有行的内容
			for(var i=0;i<trs.length;i++){
				var id=trs[i].children[0].innerHTML;//获取表格ID
				var userName=trs[i].children[1].innerHTML;//获取表格姓名
				if (id==no&&name==userName) {
					trs[i].style.backgroundColor='yellow';
				}
			}
		}
	</script>
</body>
</html>
javascript制作查找表格内容并高亮显示效果

猜你喜欢
