<!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制作查找表格内容并高亮显示效果
猜你喜欢
转载自blog.csdn.net/weixin_44830974/article/details/90017900
今日推荐
周排行