<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style type="text/css">
table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 20px;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
</style>
</head>
<body>
<label for="">ID</label><input type="text" id="txt-id">
<label for="">姓名</label><input type="text" id="txt-name">
<button id="btn-search">搜索</button>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1000</td>
<td>Jack</td>
<td>18</td>
<td>枫杨街</td>
</tr>
<tr>
<td>1001</td>
<td>李四</td>
<td>28</td>
<td>玉兰街</td>
</tr>
<tr>
<td>1002</td>
<td>Tom</td>
<td>19</td>
<td>石楠路</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>18</td>
<td>国槐街</td>
</tr>
<tr>
<td>1004</td>
<td>张三</td>
<td>22</td>
<td>科学大道</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 1.根据输入框内容，搜索表格，被检索项高亮显示(黄色)。
var txtId=document.getElementById('txt-id');//输入框
var txtName=document.getElementById('txt-name');
var tbody=document.getElementsByTagName('tbody')[0];//tbody对象
// console.log(tbody);
var trs=tbody.getElementsByTagName('tr');//tbody下的所有行 HTMLCollection
// console.log(trs);
//"搜索"点击事件
document.getElementById('btn-search').onclick=function () {
trimBg();
//遍历内容行
for(var i=0;i<trs.length;i++){
var id=trs[i].children[0].innerHTML;//获取每一行的id 的内容
var uName=trs[i].children[1].innerHTML;//获取每一行的姓名
//获取输入框内容
var userId=txtId.value.trim();//祛除空格后的数据
var userName=txtName.value.trim();//祛除空格
if((userId!=''&&userName==''&&id==userId)||
(userId==''&&userName!=''&&uName==userName)||
(userId!=''&&userName!=''&&id==userId&&uName==userName)){
trs[i].style.background='yellow';
}
}
};
//祛除行背景
function trimBg(){
for(var i=0;i<trs.length;i++){
trs[i].style.background='white';
}
}
</script>
</body>
</html>根据输入框内容，搜索表格，被检索项高亮显示(黄色)
猜你喜欢
转载自blog.csdn.net/weixin_44606660/article/details/87605926
今日推荐
周排行