功能描述:
在搜索框中输入某一个字段,可以查询到相关的内容
功能实现:
1. 先声明变量用于保存输入框以及表格里面的内容
2. 循环遍历
遍历表格每一行,查找匹配项
3. 判断
如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏
功能实现:
#myInput {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
项目名称 | 时间 |
---|---|
redPackets | 2017.2.6 |
traffic | 2016.12.25 |
creditCard | 2017.1.18 |
returnMoney | 2016.11.25 |
function myFunction() {
// 声明变量
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// 循环表格每一行,查找匹配项
for (i = 0; i < tr.length; i++) {
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";
}
}
}
}
扩展:模拟通讯录搜索提示
#myInput {
width: 100%;
font-size: 16px; /* 加大字体 */
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* 链接添加边框 */
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li a.header {
background-color: #5587A2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
function myFunction() {
// 声明变量
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// 循环所有列表,查找匹配项
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。