本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下
表格数据搜索
| 名称 | 城市 |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
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 -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
