本文实例为大家分享了js实现表格数据搜索的具体代码，供大家参考，具体内容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格数据搜索</title> <link href="../css/表格数据搜索.css" 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
#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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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"; } } }} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45596380/article/details/105951860
