js实现表格数据搜索
程序员文章站
2022-07-09 10:33:20
本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表格数据搜索</title>
<link href="../css/表格数据搜索.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<input type="text" placeholder="搜索..." id="myinput" onkeyup="myfunction()">
<table id="mytable">
<tr>
<th>名称</th>
<th>城市</th>
</tr>
<tr>
<td>alfreds futterkiste</td>
<td>germany</td>
</tr>
<tr>
<td>berglunds snabbkop</td>
<td>sweden</td>
</tr>
<tr>
<td>island trading</td>
<td>uk</td>
</tr>
<tr>
<td>koniglich essen</td>
<td>germany</td>
</tr>
</table>
<script src="../js/表格数据搜索.js">
</script>
</body>
</html>
css:
#myinput{
background: url('https://static.runoob.com/images/mix/searchicon.png')no-repeat;
background-position: 10px 12px;
width:100%;
padding: 12px 20px 12px 40px;
border:1px solid #ddd;
font-size: 16px;
margin-bottom: 12px;
border-radius: 6px;
}
#mytable {
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
border-collapse:collapse;
}
#mytable th,td{
text-align: left;
padding:15px 12px;
}
#mytable tr{
/* 表格添加边框 */
border-bottom:1px solid #ddd;
}
#mytable tr:hover{
background-color: #f1f1f1;
}
#mytable th{
background-color: #f1f1f1;
}
js:
function myfunction() {
var myinput=document.getelementbyid("myinput");
var filter=myinput.value.touppercase();
var table=document.getelementbyid("mytable");
var tr=table.getelementsbytagname("tr");
//循环列表每一项，查找匹配项
for(var i=0;i<tr.length;i++) {
var td = tr[i].getelementsbytagname("td")[0];
if (td){
if (td.innerhtml.touppercase().indexof(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。